#4145 - Uploader's enhancement

inc/classes/BxDolUploader.php

@@ -254,7 +254,12 @@ abstract class BxDolUploader extends BxDolFactory
     {
         return $this->_oTemplate->parseHtmlByName($this->_sButtonTemplate, $aParams);
     }
-
+    
+    public function getUploaderJsParams()
+    {
+        return [];
+    }
+    
     /**
      * Show uploader JS.
      * @return HTML string

inc/classes/BxDolXmlParser.php

@@ -83,8 +83,10 @@ class BxDolXmlParser extends BxDolFactory implements iBxDolSingleton
                 $aResult[] = $aValues[$iTagIndex]['attributes'];
             return $aResult;
         } else {
-            $iTagIndex = $aIndexes[strtoupper($sXmlTagName)][$sXmlTagIndex];
-            return $aValues[$iTagIndex]['attributes'];
+            if (isset($aIndexes[strtoupper($sXmlTagName)][$sXmlTagIndex])){
+                $iTagIndex = $aIndexes[strtoupper($sXmlTagName)][$sXmlTagIndex];
+                return $aValues[$iTagIndex]['attributes'];
+            }
         }
     }
 

inc/js/classes/BxDolUploader.js

@@ -31,11 +31,12 @@ BxDolUploaderSimple.prototype.init = function (sUploaderObject, sStorageObject,
 
     this._sResultContainerId = 'bx-form-input-files-' + sUniqId + '-upload-result';
     this._sErrorsContainerId = 'bx-form-input-files-' + sUniqId + '-errors'; 
+    this._sProgressContainerId = 'bx-form-input-files-' + sUniqId + '-progress'; 
 
     this._sFormContainerId = 'bx-form-input-files-' + sUniqId + '-form-cont';
 
     this._sTemplateGhost = options.template_ghost ? options.template_ghost : '<div id="' + this._getFileContainerId('{file_id}') + '"><input type="hidden" name="f[]" value="{file_id}" />{file_name} (<a href="javascript:void(0);" onclick="{js_instance_name}.deleteGhost(\'{file_id}\')">delete</a>)</div>';
-    this._sTemplateReorder = options.template_reorder ? options.template_reorder : '<div class="bx-uploader-ghost-reorder"><i class="sys-icon bars"></i></div>';
+    this._sTemplateReorder = options.template_reorder ? options.template_reorder : '<div class="bx-uploader-ghost-reorder bx-btn bx-btn-small"><i class="sys-icon bars"></i></div>';
     this._sTemplateError = options.template_error_msg ? options.template_error_msg : '<div>{error}</div>' ;
     this._sTemplateErrorGhosts = options.template_error_ghosts ? options.template_error_ghosts : this._sTemplateError;
 
@@ -162,7 +163,7 @@ BxDolUploaderSimple.prototype.restoreGhosts = function (bInitReordering, onCompl
                 var sClassGhost = 'bx-uploader-ghost';
                 $('#' + $this._sResultContainerId).find('.' + sClassGhost).each(function() {
                     if($(this).find('.bx-uploader-ghost-reorder').length == 0)
-                        $(this).prepend($this._sTemplateReorder);
+                        $(this).find('.bx-base-general-uploader-ghost').prepend($this._sTemplateReorder);
                 });
 
                 var fInitReordering = function() {                    
@@ -452,6 +453,9 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
     this._sFocusDivId = 'bx-form-input-files-' + sUniqId + '-focus-' + this._sUploaderObject;
 
     this._uploader = null;
+    
+    this._aFiles = [];
+  
 
     this.initUploader = function (o) {
 
@@ -490,7 +494,32 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
                 $this.onUploadCompleted(''); 
             },
             onprocessfileprogress(file, progress) {
-               
+                $this._aFiles[file.source.lastModified+'-'+file.source.size+'-'+file.source.name] = progress * file.source.size;
+                iTotal = 0;
+                iUploaded = 0; 
+                for (const propertyName in $this._aFiles) {
+                    iUploaded += $this._aFiles[propertyName];
+                }
+                
+                for (i = 0; i < $this._uploader.getFiles().length; i++){
+                    iTotal += $this._uploader.getFiles()[i].source.size;
+                }
+            
+                iProgress = iUploaded / iTotal * 100;
+            
+                oProgress =  $('#' + $this._sProgressContainerId);
+                
+                if (oProgress.parents('form').find('.uploader_progress').length > 0){
+                    oProgress = oProgress.parents('form').find('.uploader_progress');
+                }
+                if (iProgress == 100){
+                    oProgress.hide();
+                    $this._aFiles = [];
+                }
+                else{
+                    oProgress.show();
+                    oProgress.find('.progress_line').css('width', iProgress + '%');
+                }
             },
             server: {
 				process: (fieldName, file, metadata, load, error, progress, abort) => {
@@ -582,7 +611,7 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
             document.querySelector('#' + this._sDivId),
             $.extend({}, _options, o)
         );    
-
+        console.log(1);
         this.initPasteEditor();
     }
 
@@ -618,7 +647,7 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
     }
 
     this.onProgress = function (params) {
-
+        console.log(params);    
     }
 
     this.onClickCancel = function () {
@@ -664,6 +693,22 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
             }
         });
     }
+    
+    this.showUploaderForm = function() {
+        this._uploader.browse();
+    }
+    
+    this.initUploader({
+        'maxFilesize': options.maxFilesize,
+        'acceptedFiles': options.acceptedFiles,
+        'resizeWidth': options.resizeWidth,
+        'resizeHeight': options.resizeHeight,
+        'resizeMethod': options.resizeMethod,
+        'dictDefaultMessage': options.dictDefaultMessage,
+        'dictFileTooBig': options.dictFileTooBig,
+        'dictMaxFilesExceeded': options.dictMaxFilesExceeded,
+        'dictInvalidFileType': options.dictInvalidFileType,
+    });
 }
 
 BxDolUploaderHTML5.prototype = BxDolUploaderSimple.prototype;
@@ -816,27 +861,28 @@ function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, opt
 
     this.onShowPopup = function () {
         var $this = this;
+        try {
+            navigator.mediaDevices.getUserMedia({ audio: true, video: {facingMode: this._camera_type} }).then(function(camera) {
+                $this._camera = camera;
+                $this.showCameraCapture();
+
+                $('#' + $this._sFormContainerId + ' .bx-uploader-recording-start').show();
+                $('#' + $this._sFormContainerId + ' .bx-uploader-recording-stop').hide();
+                $('#' + $this._sFormContainerId + ' .bx-uploader-record-video-controls').show();
+
+                navigator.mediaDevices.enumerateDevices().then(function(mediaDevices){
+                    let constraints = navigator.mediaDevices.getSupportedConstraints();
+                    if ($this.getDevicesNum(mediaDevices) > 1 && typeof constraints.facingMode != 'undefined' && constraints.facingMode) {
+                        $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').show();
+                    } else {
+                        $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').hide();
+                    }
+                });
 
-        navigator.mediaDevices.getUserMedia({ audio: true, video: {facingMode: this._camera_type} }).then(function(camera) {
-            $this._camera = camera;
-            $this.showCameraCapture();
-
-            $('#' + $this._sFormContainerId + ' .bx-uploader-recording-start').show();
-            $('#' + $this._sFormContainerId + ' .bx-uploader-recording-stop').hide();
-            $('#' + $this._sFormContainerId + ' .bx-uploader-record-video-controls').show();
-
-            navigator.mediaDevices.enumerateDevices().then(function(mediaDevices){
-                let constraints = navigator.mediaDevices.getSupportedConstraints();
-                if ($this.getDevicesNum(mediaDevices) > 1 && typeof constraints.facingMode != 'undefined' && constraints.facingMode) {
-                    $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').show();
-                } else {
-                    $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').hide();
-                }
-            });
-
-        }).catch(function(error) {
+            })
+        } catch (err) {
             $this._showError(_t('_sys_uploader_camera_capture_failed'));
-        });
+        }
     }
 
     this.onClickCancel = function () {

modules/base/general/template/css/forms.css

@@ -12,10 +12,6 @@
     float:left;
 }
 
-.bx-uploader-ghost .bx-base-general-icon-wrapper img {
-    max-height:12.5rem;
-}
-
 .bx-uploader-ghost .bx-btn {
 	float: none;
 	display: inline-block;

modules/base/profile/template/form_ghost_template.html

@@ -1,9 +1,11 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-uploader-ghost-single mt-2 bx-clearfix">
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+        </div>
+        <span class="bx-base-general-uploader-ghost bx-base-general-uploader-ghost-single">
+            <a class="bx-btn bx-btn-small mt-2 mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+        </span>
     </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small mt-2 mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
 </div>

modules/base/text/classes/BxBaseModTextFormEntry.php

@@ -109,7 +109,7 @@ class BxBaseModTextFormEntry extends BxBaseModGeneralFormEntry
     
     protected function genCustomInputAttachments ($aInput)
     {
-        return '__attachments_menu__';
+        return '__attachments_menu__' . $this->_oModule->_oTemplate->parseHtmlByName('uploader_progress.html', []);
     }
 
     protected function genCustomInputPolls ($aInput)

modules/base/text/template/form_ghost_template.html

@@ -1,26 +1,23 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon rounded bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
+    <div class="bx-uploader-ghost-cnt">
+        <input type="hidden" name="__name__[]" value="{file_id}" />
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-base-general-icon rounded bx-base-general-icon-{file_id}" />
         </div>
-        <div class="mt-2">
+        <span class="bx-base-general-uploader-ghost">
             <span id="bx-base-general-intert-to-post-link-{file_id}" class="inline-block" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_insert />" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><i class="sys-icon plus"></i></a>
             </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-            <bx_if:set_thumb>
-                <span class="bx-base-general-use-as-thumb inline-block">
-                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                    <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
-                </span>
-            </bx_if:set_thumb>
-        </div>
-    </span>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
+    <bx_if:set_thumb>
+        <span class="bx-base-general-use-as-thumb inline-block">
+            <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
+            <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
+        </span>
+    </bx_if:set_thumb>
 </div>
 <script>
     $('#bx-base-general-intert-to-post-link-{file_id}').show();

modules/base/text/template/form_ghost_template_cover.html

@@ -1,12 +1,14 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+    <div class="bx-uploader-ghost-cnt">
+        <input type="hidden" name="__name__[]" value="{file_id}" />
+        <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+        </div>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+        </span>
     </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
 </div>
 <script>
     // disable images drag&drop, because resized images address can be reset after some time

modules/base/text/template/form_ghost_template_file.html

@@ -1,17 +1,14 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
         </div>
-    </span>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
 </div>
 <script>
     $('#bx-base-general-intert-to-post-link-{file_id}').show();

modules/base/text/template/form_ghost_template_sound.html

@@ -1,20 +1,17 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
         </div>
-        <div class="mt-2">
+        <span class="bx-base-general-uploader-ghost">
             <span id="bx-base-general-insert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_insert />" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><i class="sys-icon plus"></i></a>
             </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+             <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
 </div>
 <script>
     $('#bx-base-general-insert-to-post-link-{file_id}').show();

modules/base/text/template/form_ghost_template_video.html

@@ -1,20 +1,17 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
+            <input type="hidden" name="__name__[]" value="{file_id}" />
         </div>
-        <div class="mt-2">
+        <span class="bx-base-general-uploader-ghost">
             <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title = "<bx_text:_sys_txt_form_entry_input_picture_insert />" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><i class="sys-icon plus"></i></a>
             </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete /" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
 </div>
 <script>
     $('#bx-base-general-intert-to-post-link-{file_id}').show();

modules/base/text/template/uploader_button_html5_attach.html

@@ -0,0 +1,10 @@
+<div>
+    <div id="__div_id__" class="filepond bx-uploader-html5-drop-area border-2 border-gray-300 border-dashed rounded-lg hidden"></div>
+    <input type="text" id="__focus_div_id__" class="bx-uploader-html5-paste-catcher" tabindex="1" style="display: none" />
+    <div id="__errors_container_id__" class="bx-uploader-html5-errors-area bx-def-font-small"></div>
+    <div id="__progress_div_id__" class="hidden">
+        <div class="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+            <div class="bg-blue-600 h-1 rounded-full progress_line" style="width: 0%"></div>
+        </div>
+    </div>
+</div>

modules/boonex/ads/classes/BxAdsFormEntry.php

@@ -241,7 +241,11 @@ class BxAdsFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 

modules/boonex/ads/template/form_ghost_template.html

@@ -1,26 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon rounded bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <span id="bx-base-general-intert-to-post-link-{file_id}" class="inline-block" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-            </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/albums/template/form_ghost_template.html

@@ -1,24 +1,22 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <a class="bx-anchor-invisible" name="album-media-{file_id}"></a>
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_bx_albums_form_entry_file_title /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_title_attr}" name="title-{file_id}" /> <br />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-            <bx_if:set_thumb>
-                <span class="bx-base-general-use-as-thumb">
-                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                    <label for="__name_thumb__-{file_id}"><bx_text:_sys_txt_form_entry_input_picture_use_as_thumb /></label>
-                </span>
-            </bx_if:set_thumb>
+    <div class="bx-uploader-ghost-cnt">
+        <a class="bx-anchor-invisible" name="album-media-{file_id}"></a>
+        <input type="hidden" name="__name__[]" value="{file_id}" />
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
         </div>
-    </span>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
+    <input placeholder="<bx_text:_bx_albums_form_entry_file_title />" class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_title_attr}" name="title-{file_id}" />
+    <bx_if:set_thumb>
+        <span class="bx-base-general-use-as-thumb">
+            <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
+            <label for="__name_thumb__-{file_id}"><bx_text:_sys_txt_form_entry_input_picture_use_as_thumb /></label>
+        </span>
+    </bx_if:set_thumb>
 </div>
 <script>
     $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-thumb input[value="__thumb_id__"]').attr('checked', true);

modules/boonex/artificer/data/template/bx_forum/form_ghost_template.html

@@ -1,26 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-            </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/bx_forum/form_ghost_template_cover.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    var aType = '{file_type}'.split('/');
-    if(!aType || aType[0] != 'image' || -1 === $.inArray(aType[1], ['gif', 'jpeg', 'png'])) {
-        $('#bx-base-general-intert-to-post-link-{file_id}').remove();
-        $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-thumb').remove();
-    }
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/bx_forum/form_ghost_template_file.html

@@ -1,23 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/bx_forum/form_ghost_template_video.html

@@ -1,26 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-            </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/mod_general/css/forms.css

@@ -5,7 +5,4 @@
 }
 .bx-form-input-files-result.ui-sortable .bx-uploader-ghost-reorder {
     cursor: move;
-}
-.bx-uploader-ghost .bx-base-general-icon-wrapper img {
-    max-height: 12.5rem;
 }

modules/boonex/classes/classes/BxClssFormEntry.php

@@ -215,7 +215,11 @@ class BxClssFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 

modules/boonex/classes/template/form_ghost_template.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/classes/template/form_ghost_template_cover.html

@@ -1,16 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/classes/template/form_ghost_template_file.html

@@ -1,19 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/classes/template/form_ghost_template_sound.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-classes-insert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-classes-insert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/classes/template/form_ghost_template_video.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/english/data/langs/system/en.xml

@@ -3603,6 +3603,7 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_txt_forgot_pasword_error_occured"><![CDATA[Error occurred, please report error to the site administrator.]]></string>
     <string name="_sys_txt_forgot_pasword_sms_text"><![CDATA[Click the link below to reset your password {0}]]></string>
 
+    <string name="_sys_txt_form_entry_input_picture_copy"><![CDATA[Copy URL]]></string>
     <string name="_sys_txt_form_entry_input_picture_delete"><![CDATA[Delete]]></string>
     <string name="_sys_txt_form_entry_input_picture_insert"><![CDATA[Insert to Post]]></string>
     <string name="_sys_txt_form_entry_input_picture_pic_url"><![CDATA[Attachment URL:]]></string>

modules/boonex/files/template/form_ghost_template.html

@@ -1,6 +1,6 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
     <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
+    <div class="bx-base-general-icon-wrapper">
         <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
     </div>
     <span class="bx-base-general-uploader-ghost">

modules/boonex/files/template/form_ghost_template_upload.html

@@ -1,15 +1,12 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_bx_files_form_entry_input_title /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_title_attr}" name="title-{file_id}" />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded" />
         </div>
-    </span>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
 </div>

modules/boonex/forum/classes/BxForumFormEntry.php

@@ -156,7 +156,11 @@ class BxForumFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 }

modules/boonex/forum/template/form_ghost_template.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/forum/template/form_ghost_template_cover.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    var aType = '{file_type}'.split('/');
-    if(!aType || aType[0] != 'image' || -1 === $.inArray(aType[1], ['gif', 'jpeg', 'png'])) {
-        $('#bx-base-general-intert-to-post-link-{file_id}').remove();
-        $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-thumb').remove();
-    }
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/forum/template/form_ghost_template_file.html

@@ -1,19 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/forum/template/form_ghost_template_video.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/market/js/form.js

@@ -49,7 +49,7 @@ BxMarketForm.prototype.initGhost = function(oGhost, iFileId, iThumbnailId, iCove
 
     oGhost.parent().children('.bx-uploader-ghost').each(function(iIndex, oElement) {
         if(iIndex > 0 && !$(oElement).hasClass('closed'))
-            $(oElement).addClass('closed').find('.bx-uploader-ghost-header:first').addClass('bx-def-color-bg-hl').siblings('.bx-uploader-ghost-body:first').hide();
+            $(oElement).addClass('closed').find('.bx-uploader-ghost-header:first').siblings('.bx-uploader-ghost-body:first').hide();
     });
 };
 
@@ -57,7 +57,7 @@ BxMarketForm.prototype.toggleGhost = function(oLink) {
     $(oLink).parents('.bx-uploader-ghost:first').toggleClass('closed').find('.bx-uploader-ghost-body').resize(function() {
         $(this).parents('.bx-form-input-files-result:first').bx_show_more_check_overflow();
     }).bx_anim('toggle', this._sAnimationEffect, this._iAnimationSpeed, function() {
-        $(this).siblings('.bx-uploader-ghost-header').toggleClass('bx-def-color-bg-hl');
+        $(this).siblings('.bx-uploader-ghost-header');
     });
 };
 

modules/boonex/market/template/css/forms.css

@@ -23,12 +23,28 @@
 
     content: '';
 }
-
+#bx_market #bx-form-element-files .bx-form-input-files-result{
+    flex-direction: column;
+    align-items: flex-start;
+}
+#bx_market #bx-form-element-files .bx-uploader-ghost{
+    width: 100%;
+    display: block;
+}
+#bx_market #bx-form-element-files .bx-base-general-uploader-ghost{
+    position: relative;
+    display: block;
+}
+#bx_market #bx-form-element-files .bx-base-general-uploader-ghost .bx-btn.bx-btn-small{
+    display: inline-block;
+    min-height: inherit;
+}
 .bx-uploader-ghost-header {
     position: relative;
     line-height: 1.5rem;
 }
 
+
 .bx-uploader-ghost .bx-uploader-ghost-header .sys-icon {
     display: inline-block;
     width: 1.5rem;

modules/boonex/market/template/form_ghost_template.html

@@ -1,42 +1,35 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-market-uploader-ghost-photo mt-2 flex flex-col items-stretch">
-    <div class="bx-uploader-ghost-header py-1 px-2">
-        <a href="javascript:void(0)" onclick="javascript:{js_object}.toggleGhost(this);"><i class="sys-icon chevron-right"></i></a> {file_name}
-    </div>
-    <div class="bx-uploader-ghost-body flex items-start w-full my-1">
-        <input type="hidden" name="__name__" value="{file_id}" />
-        <div class="bx-base-general-icon-wrapper mr-2">
-            <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded-md" />
-        </div>
-        <span class="bx-base-general-uploader-ghost flex-1">
-            <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-            <div class="bx-form-input-wrapper bx-form-input-wrapper-text mb-2">
-                <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-uploader-ghost-body flex items-start w-full my-1">
+            <input type="hidden" name="__name__" value="{file_id}" />
+            <div class="bx-base-general-icon-wrapper">
+                <img src="{file_icon}" class="bx-base-general-icon bx-base-general-icon-{file_id} rounded-md" />
             </div>
-            <div class="font-bold"><bx_text:_bx_market_form_entry_input_pictures_title /></div>
-            <div class="bx-form-input-wrapper bx-form-input-wrapper-text mb-2">
-                <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" name="title-{file_id}" value="{file_title_attr}" />
+            <span class="bx-base-general-uploader-ghost flex-1">
+                <div class="font-bold"></div>
+                    <span class="bx-base-general-intert-to-post-link" id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
+                        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_insert />" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><i class="sys-icon plus"></i></a>
+                    </span>
+                    <span id="bx-base-general-delete-link-{file_id}">
+                        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+                    </span>
+                    <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+                </div>
+            </span>
+        </div>
+        <input placeholdder="<bx_text:_bx_market_form_entry_input_pictures_title />" class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" name="title-{file_id}" value="{file_title_attr}" />
+         <bx_if:set_thumb>
+            <div class="bx-base-general-use-as-thumb">
+                <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
+                <label for="__name_thumb__-{file_id}"><bx_text:_bx_market_form_entry_input_pictures_use_as_thumb /></label>
             </div>
-            <div class="bx-base-general-buttons">
-                <span class="bx-base-general-intert-to-post-link" id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                    <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-                </span>
-                <span id="bx-base-general-delete-link-{file_id}">
-                    <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-                </span>
+        </bx_if:set_thumb>
+        <bx_if:set_cover>
+            <div class="bx-base-general-use-as-cover">
+                <input type="checkbox" name="__name_cover__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_cover__')" id="__name_cover__-{file_id}" /> 
+                <label for="__name_cover__-{file_id}"><bx_text:_bx_market_form_entry_input_pictures_use_as_cover /></label>
             </div>
-            <bx_if:set_thumb>
-                <div class="bx-base-general-use-as-thumb">
-                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                    <label for="__name_thumb__-{file_id}"><bx_text:_bx_market_form_entry_input_pictures_use_as_thumb /></label>
-                </div>
-            </bx_if:set_thumb>
-            <bx_if:set_cover>
-                <div class="bx-base-general-use-as-cover">
-                    <input type="checkbox" name="__name_cover__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_cover__')" id="__name_cover__-{file_id}" /> 
-                    <label for="__name_cover__-{file_id}"><bx_text:_bx_market_form_entry_input_pictures_use_as_cover /></label>
-                </div>
-            </bx_if:set_cover>
-        </span>
+        </bx_if:set_cover>
     </div>
 </div>
 <script language="javascript">

modules/boonex/photos/template/form_ghost_template.html

@@ -1,14 +1,17 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+        </div>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+            <bx_if:set_thumb>
+                <input type="hidden" name="__name_thumb__[]" value="{file_id}" />
+            </bx_if:set_thumb>
+        </span>
     </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        <bx_if:set_thumb>
-            <input type="hidden" name="__name_thumb__[]" value="{file_id}" />
-        </bx_if:set_thumb>
-    </span>
 </div>
 <script>
     $('#bx-base-general-intert-to-post-link-{file_id}').show();

modules/boonex/photos/template/form_ghost_template_upload.html

@@ -1,15 +1,15 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_bx_photos_form_entry_input_title /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="" name="title-{file_id}" />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
         </div>
-    </span>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
+    <div class="bx-form-input-wrapper bx-form-input-wrapper-text w-full">
+        <input placeholder="<bx_text:_bx_photos_form_entry_input_title />" class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="" name="title-{file_id}" />
+    </div>
 </div>

modules/boonex/posts/classes/BxPostsFormEntry.php

@@ -172,7 +172,7 @@ class BxPostsFormEntry extends BxBaseModTextFormEntry
             'content_id' => $this->aInputs[$CNF['FIELD_COVER']]['content_id'],
             'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
             'thumb_id' => isset($CNF['FIELD_THUMB']) && isset($aContentInfo[$CNF['FIELD_THUMB']]) ? $aContentInfo[$CNF['FIELD_THUMB']] : 0,
-            'name_thumb' => isset($CNF['FIELD_THUMB']) ? $CNF['FIELD_THUMB'] : ''
+            'name_thumb' => isset($CNF['FIELD_THUMB']) ? $CNF['FIELD_THUMB'] : '',
         );
     }
 
@@ -183,7 +183,11 @@ class BxPostsFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 }

modules/boonex/posts/template/form_ghost_template.html

@@ -1,26 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-base-general-icon rounded bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <span id="bx-base-general-intert-to-post-link-{file_id}" class="inline-block" style="display:none;">
-                <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-            </span>
-            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/reviews/classes/BxReviewsFormEntry.php

@@ -208,7 +208,11 @@ class BxReviewsFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 

modules/boonex/reviews/template/form_ghost_template.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/reviews/template/form_ghost_template_cover.html

@@ -1,16 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/reviews/template/form_ghost_template_file.html

@@ -1,19 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/reviews/template/form_ghost_template_video.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/russian/data/langs/system/ru.xml

@@ -3525,6 +3525,7 @@
     <string name="_sys_txt_forgot_pasword_error_occured"><![CDATA[Произошла ошибка, пожалуйста, уведомите о ней администратора сайта.]]></string>
     <string name="_sys_txt_forgot_pasword_sms_text"><![CDATA[Чтобы восстановить пароль нажмите на ссылку {0}]]></string>
 
+    <string name="_sys_txt_form_entry_input_picture_copy"><![CDATA[Скопировать ссылку]]></string>
     <string name="_sys_txt_form_entry_input_picture_delete"><![CDATA[Удалить]]></string>
     <string name="_sys_txt_form_entry_input_picture_insert"><![CDATA[Вставить в сообщение]]></string>
     <string name="_sys_txt_form_entry_input_picture_pic_url"><![CDATA[URL прикрепления:]]></string>

modules/boonex/stream/template/form_ghost_template_cover.html

@@ -1,16 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/tasks/classes/BxTasksFormEntry.php

@@ -199,7 +199,11 @@ class BxTasksFormEntry extends BxBaseModTextFormEntry
     	return array (
             'name' => $this->aInputs[$CNF['FIELD_PHOTO']]['name'],
             'content_id' => (int)$this->aInputs[$CNF['FIELD_PHOTO']]['content_id'],
-            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : ''
+            'editor_id' => isset($CNF['FIELD_TEXT_ID']) ? $CNF['FIELD_TEXT_ID'] : '',
+            'bx_if:set_thumb' => [
+				'condition' => false,
+				'content' => []
+			],
     	);
     }
 	

modules/boonex/tasks/template/form_ghost_template.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/tasks/template/form_ghost_template_cover.html

@@ -1,16 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <input type="hidden" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/tasks/template/form_ghost_template_file.html

@@ -1,19 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/tasks/template/form_ghost_template_video.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__', '{file_type}', '__embed_url__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/timeline/template/uploader_nfw.html

@@ -1,9 +1,11 @@
 <div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-tl-uploader-file bx-def-margin-sec-top bx-def-margin-sec-left-auto">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-tl-uploader-file-preview bx-def-round-corners">
-    	<img src="<bx_image_url:spacer.gif />" style="background-image:url({file_icon})" />
-    </div>
-    <div class="bx-tl-uploader-file-actions bx-def-margin-thd-top bx-clearfix">
-    	<a class="bx-btn bx-btn-small" href="javascript:void(0);" onclick="{js_instance_name}.deleteGhost('{file_id}')"><bx_text:_Delete /></a>
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-tl-uploader-file-preview bx-def-round-corners">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="<bx_image_url:spacer.gif />" style="background-image:url({file_icon})" />
+        </div>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small" href="javascript:void(0);" title="<bx_text:_Delete />" onclick="{js_instance_name}.deleteGhost('{file_id}')"><i class="sys-icon times"></i></a>
+        </span>
     </div>
 </div>

modules/boonex/videos/template/form_ghost_template.html

@@ -1,35 +1,32 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start">
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <input type="hidden" name="__name__[]" value="{file_id}" />
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
         </div>
-        <div class="mt-2">
+        <span class="bx-base-general-uploader-ghost">
             <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
+                <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_insert />" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><i class="sys-icon plus"></i></a>
             </span>
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-            <bx_if:set_thumb>
-                <br />
-                <span class="bx-base-general-use-as-thumb">
-                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                    <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
-                </span>
-            </bx_if:set_thumb>
-            <bx_if:set_poster>
-                <br />
-                <span class="bx-base-general-use-as-poster">
-                    <input type="checkbox" name="__name_poster__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_poster__')" id="__name_poster__-{file_id}" /> 
-                    <label for="__name_poster__-{file_id}">__txt_pict_use_as_poster__</label>
-                </span>
-            </bx_if:set_poster>
-        </div>
-    </span>
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
+    <bx_if:set_poster>
+        <span class="bx-base-general-use-as-poster">
+            <input type="checkbox" name="__name_poster__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_poster__')" id="__name_poster__-{file_id}" /> 
+            <label for="__name_poster__-{file_id}">__txt_pict_use_as_poster__</label>
+        </span>
+    </bx_if:set_poster>
+
+    <bx_if:set_thumb>
+        <span class="bx-base-general-use-as-thumb">
+            <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
+            <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
+        </span>
+    </bx_if:set_thumb>
 </div>
+
 <script>
     $('#bx-base-general-intert-to-post-link-{file_id}').show();
 

modules/boonex/videos/template/form_ghost_template_video.html

@@ -1,18 +1,15 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-4">
+    <div class="bx-uploader-ghost-cnt">
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+            <input type="hidden" name="__name__[]" value="{file_id}" />
         </div>
-        <div class="mt-2">
+        <span class="bx-base-general-uploader-ghost">
             <input type="hidden" name="__name_thumb__" value="{file_id}" />
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', [], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', [], {js_instance_name});"><i class="sys-icon times"></i></a>
+            <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_copy />" onclick="bx_copy_to_clipboard('{file_url}');"><i class="sys-icon copy"></i></a>
+        </span>
+    </div>
 </div>
 <script>
     // disable images drag&drop, because resized images address can be reset after some time

template/css/uploaders.css

@@ -2,6 +2,46 @@
 .bx-uploader-msg-err {
     color:#900;
 }
+.bx-uploader-ghost{
+    width: 290px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    grid-gap: 0.5rem;
+}
+.bx-uploader-ghost.bx-uploader-ghost-single{
+    width: auto;
+}
+.bx-uploader-ghost-cnt{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.bx-form-input-files-result{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    grid-gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.bx-base-general-icon-wrapper{
+    position: relative;
+}
+.bx-base-general-uploader-ghost{
+    position: absolute;
+    bottom: 0.5rem;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+.bx-base-general-uploader-ghost .bx-btn.bx-btn-small{
+    height: auto !important;
+    line-height: normal !important;
+    min-height: 30px;
+    display: flex;
+}
 
 .bx-uploader-ghost-preview {
     width:101px; 

template/form_field_uploader.html

@@ -5,5 +5,5 @@
 __info__
 __error__
 <div id="__id_container_errors__" class="bx-form-input-files-errors"></div>
-<div id="__id_container_result__" class="bx-form-input-files-result bx-clearfix"></div>
+<div id="__id_container_result__" class="bx-form-input-files-result"></div>
 __uploaders_js__

template/scripts/BxBaseFormView.php

@@ -1453,6 +1453,8 @@ BLAH;
                 $aAttrs = array_merge($aAttrs, array('onclick' => $oUploader->getNameJsInstanceUploader() . '.showUploaderForm();'));
 
             $aParamsButtons = [
+                'content_id' => isset($aInput['content_id']) ? $aInput['content_id'] : '',
+                'storage_private' => isset($aInput['storage_private']) ? $aInput['storage_private'] : '1',
                 'attrs' => bx_convert_array2attrs($aAttrs),
                 'btn_class' => !empty($aInput['attrs']['disabled']) ? 'bx-btn-disabled' : '',
                 'button_title' => bx_js_string($oUploader->getUploaderButtonTitle(isset($aInput['upload_buttons_titles']) ? $aInput['upload_buttons_titles'] : false)),
@@ -1463,12 +1465,14 @@ BLAH;
             //--- Get JS code.
             $sGhostTemplate = $this->genGhostTemplate($aInput);
 
-            $aParamsJs = [
-                'content_id' => isset($aInput['content_id']) ? $aInput['content_id'] : '',
-                'storage_private' => isset($aInput['storage_private']) ? $aInput['storage_private'] : '1',
-                'is_init_ghosts' => $bInitGhosts,
-                'is_init_reordering' => $bInitReordering
-            ];
+            $aParamsJs = array_merge($oUploader->getUploaderJsParams(), 
+                [
+                    'content_id' => isset($aInput['content_id']) ? $aInput['content_id'] : '',
+                    'storage_private' => isset($aInput['storage_private']) ? $aInput['storage_private'] : '1',
+                    'is_init_ghosts' => $bInitGhosts,
+                    'is_init_reordering' => $bInitReordering
+                ]
+            );
             if(isset($aInput['images_transcoder']) && $aInput['images_transcoder'])
                 $aParamsJs['images_transcoder'] = bx_js_string($aInput['images_transcoder']);
 

template/scripts/BxBaseUploaderHTML5.php

@@ -16,6 +16,7 @@ class BxBaseUploaderHTML5 extends BxDolUploader
 {
     protected $_sDivId; ///< div id where upload button will be placed
     protected $_sFocusDivId;
+    protected $_sProgressDivId;
 
     public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
@@ -23,6 +24,7 @@ class BxBaseUploaderHTML5 extends BxDolUploader
 
         $this->_sDivId = 'bx-form-input-files-' . $sUniqId . '-div-' . $this->_aObject['object'];
         $this->_sFocusDivId = 'bx-form-input-files-' . $sUniqId . '-focus-' . $this->_aObject['object'];
+        $this->_sProgressDivId = 'bx-form-input-files-' . $sUniqId . '-progress';
 
         $this->_sButtonTemplate = 'uploader_button_html5.html';
         $this->_sJsTemplate = 'uploader_button_html5_js.html';
@@ -56,7 +58,55 @@ class BxBaseUploaderHTML5 extends BxDolUploader
         else
             return _t('_sys_uploader_html5_button_name');
     }
+    
+    /**
+     * Show uploader button.
+     * @return HTML string
+     */
+    public function getUploaderButton($aParams = array())
+    {
+        $iResizeWidth = (int)getParam('client_image_resize_width');
+        $iResizeHeight = (int)getParam('client_image_resize_height');
+        $sAcceptedFiles = $this->getAcceptedFilesExtensions();
+
+        $iContentId = $aParams['content_id'];
+        $isPrivate  = $aParams['storage_private'];
+        
+        $aParams = array_merge(
+            $aParams,
+            [
+                'form_container_id' => $this->_sFormContainerId,
+                'errors_container_id' => $this->_sErrorsContainerId,
+                'uploader_instance_name' => $this->getNameJsInstanceUploader(),
+                'restrictions_text' => $this->getRestrictionsText(),
+                'div_id' => $this->_sDivId,
+                'focus_div_id' => $this->_sFocusDivId,
+                'progress_div_id' => $this->_sProgressDivId,
+                'content_id' => $iContentId,
+                'storage_private' => $isPrivate,
+                'max_file_size' => $this->getMaxUploadFileSize(),
+                'accepted_files' => null === $sAcceptedFiles ? 'null' : "'" . bx_js_string($sAcceptedFiles) . "'",
+                'resize_width' => $iResizeWidth ? $iResizeWidth : 'null',
+                'resize_height' => $iResizeHeight ? $iResizeHeight : 'null',
+                'resize_method' => $iResizeWidth && $iResizeHeight ? "'contain'" : 'null',
+            ]
+        );
+        return $this->_oTemplate->parseHtmlByName($this->_sButtonTemplate, $aParams);
+    }
 
+    public function getUploaderJsParams(){
+        $iResizeWidth = (int)getParam('client_image_resize_width');
+        $iResizeHeight = (int)getParam('client_image_resize_height');
+        $sAcceptedFiles = $this->getAcceptedFilesExtensions();
+        return [
+            'max_file_size' => $this->getMaxUploadFileSize(),
+            'accepted_files' => null === $sAcceptedFiles ? 'null' : "'" . bx_js_string($sAcceptedFiles) . "'",
+            'resize_width' => $iResizeWidth ? $iResizeWidth : 'null',
+            'resize_height' => $iResizeHeight ? $iResizeHeight : 'null',
+            'resize_method' => $iResizeWidth && $iResizeHeight ? "'contain'" : 'null',
+        ];
+    }                                     
+    
     /**
      * Show uploader form.
      * @return HTML string

template/uploader_button_html5.html

@@ -1 +1,4 @@
-<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>
+<!--<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>-->
+<div id="__div_id__" class="filepond bx-uploader-html5-drop-area border-2 border-gray-300 border-dashed rounded-lg"></div>
+<input type="text" id="__focus_div_id__" class="bx-uploader-html5-paste-catcher" tabindex="1" />
+<div id="__errors_container_id__" class="bx-uploader-html5-errors-area bx-def-font-small"></div>

template/uploader_button_html5_js.html

@@ -5,6 +5,15 @@ __uploader_instance_name__ = new BxDolUploaderHTML5('__engine__', '__storage_obj
     'storage_private' : '__storage_private__',
     'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
     'template_ghost': __template_ghost__,
-    'reordering': __is_init_reordering__
+    'reordering': __is_init_reordering__,
+    'maxFilesize': __max_file_size__/1024.0/1024.0,
+    'acceptedFiles': __accepted_files__,
+    'resizeWidth': __resize_width__,
+    'resizeHeight': __resize_height__,
+    'resizeMethod': __resize_method__,
+    'dictDefaultMessage': '<bx_text_js:_sys_uploader_html5_default_message />',
+    'dictFileTooBig': '<bx_text_js:_sys_uploader_html5_file_is_too_big />',
+    'dictMaxFilesExceeded': '<bx_text_js:_sys_uploader_html5_number_of_files_exceeded />',
+    'dictInvalidFileType': '<bx_text_js:_sys_uploader_html5_invalid_file_type />',
 });
 <bx_if:restore_ghosts>__uploader_instance_name__.restoreGhosts(__is_init_reordering__);</bx_if:restore_ghosts>