ACP2E-3122: refactored fix to cover all scenarios to add image

Author: alzota

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/file-uploader.js

@@ -15,16 +15,16 @@ define([
              * {@inheritDoc}
              */
             replaceInputTypeFile: function (fileInput) {
-                let fileId = fileInput.id, fileName = fileInput.name,
-                    spanElement = '<span id=\'' + fileId + '\'></span>';
+                let fileId = fileInput.id, fileName = fileInput.name, fileClass = fileInput.className,
+                    spanElement =  '<span id=\'' + fileId + fileClass + '\' ></span>';
 
                 $('#' + fileId).closest('.file-uploader-area').attr('upload-area-id', fileName);
                 $(fileInput).replaceWith(spanElement);
                 $('#' + fileId).closest('.file-uploader-area').find('.file-uploader-button:first').on('click', function () {
-                    $('#' + fileId).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
+                    $(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
                 });
-                $('#' + fileId).closest('.pagebuilder-image-uploader-container').find('.action-upload-image').on('click', function () {
-                    $('#' + fileId).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
+                $('#' + fileId + fileClass).closest('.file-uploader-area').find('.action-upload-image').on('click', function () {
+                    $(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
                 });
             },
         });

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/uploader/preview/image.html

@@ -9,12 +9,20 @@
         <div class="pagebuilder-options-wrapper">
             <ul class="pagebuilder-options-links">
                 <li class="pagebuilder-options-link">
-                    <label
-                        data-bind="event: {mousedown: stopEvent}"
-                        class="file-uploader-button action-default action-upload-image"
-                        attr="for: uid"
-                        disable="disabled"
-                        translate="translations.uploadNewImage"></label>
+                    <span class="file-uploader-area" if="visibleControls">
+                        <input
+                            type="file"
+                            afterRender="onElementRender"
+                            attr="id: uid, name: inputName, multiple: isMultipleFiles"
+                            class="file-upload-options-link"
+                            disable="disabled"></input>
+                        <label
+                            data-bind="event: {mousedown: stopEvent}"
+                            class="file-uploader-button action-default action-upload-image"
+                            attr="for: uid"
+                            disable="disabled"
+                            translate="translations.uploadNewImage"></label>
+                    </span>
                 </li>
                 <li class="pagebuilder-options-link">
                     <label
@@ -33,18 +41,12 @@
     <div class="pagebuilder-image-uploader-container-dropzone-overlay" if="visibleControls">
         <span class="dropzone-placeholder-text" translate="translations.dropHere"></span>
     </div>
-    <div class="file-uploader-area" if="visibleControls">
-        <input
-            type="file"
-            afterRender="onElementRender"
-            attr="id: uid, name: inputName, multiple: isMultipleFiles"
-            disable="disabled"></input>
-    </div>
     <div class="pagebuilder-image-empty-preview" data-bind="visible: !hasData() && isShowImageUploadInstructions">
         <div class="admin__field-control">
             <div class="file-uploader image-uploader">
-                <div class="image-uploader-area" if="visibleControls">
+                <div class="file-uploader-area" if="visibleControls">
                     <p class="image-upload-instructions" translate="translations.dragImageHere"></p>
+                    <input type="file" class="file-upload-empty-preview" afterRender="onElementRender" attr="id: uid, name: inputName, multiple: isMultipleFiles" disable="disabled"/>
                     <label class="file-uploader-button action-default action-upload-image" attr="for: uid" disable="disabled" translate="translations.uploadImage"></label>
                     <span translate="translations.or"></span>
                     <label