ACP2E-4162: Ui component fileUploader not working correctly on 2.4.8-p1/ 2.4-develop

Author: alzota

app/code/Magento/Ui/view/base/web/js/form/element/file-uploader.js

@@ -1,6 +1,6 @@
 /**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
+ * Copyright 2016 Adobe
+ * All Rights Reserved.
  */
 
 /**
@@ -110,10 +110,9 @@ define([
                         }
 
                         // code to allow duplicate files from same folder
-                        const modifiedFile = {
-                            ...currentFile,
-                            id:  currentFile.id + '-' + Date.now()
-                        };
+                        const modifiedFile = Object.assign({}, currentFile, {
+                            id: currentFile.id + '-' + Date.now()
+                        });
 
                         this.onLoadingStart();
                         return modifiedFile;
@@ -177,10 +176,53 @@ define([
             let fileId = fileInput.id, fileName = fileInput.name,
                 spanElement = '<span id=\'' + fileId + '\'></span>';
 
-            $('#' + fileId).closest('.file-uploader-area').attr('upload-area-id', fileName);
+            $(fileInput).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');
+        },
+
+        /**
+         * Trigger the file browser dialog
+         *
+         * @param {jQuery} $area
+         */
+        triggerFileBrowser: function ($area) {
+            const $browseBtn = $area.find('.uppy-Dashboard-browse').first();
+
+            if ($browseBtn.length > 0) {
+                $browseBtn[0].click();
+                return;
+            }
+
+            let $dashboard = $area.find('.uppy-Dashboard-inner'),
+                $fileInput = $dashboard.find('input[type="file"]:visible').first();
+
+            if ($fileInput.length > 0) {
+                $fileInput[0].click();
+            }
+        },
+
+        /**
+         * Binds click events for file browser triggers using event delegation
+         *
+         * @param {String} fileId
+         */
+        bindFileBrowserTriggers: function (fileId) {
+            let self = this,
+                $area = $('[upload-area-id="' + fileId + '"]').closest('.file-uploader-area'),
+                $dropZone = $area.closest('[data-role=drop-zone]');
+
+            if (!$area.length) {
+                $area = $('span[id="' + fileId + '"]').closest('.file-uploader-area');
+                $dropZone = $area.closest('[data-role=drop-zone]');
+            }
+
+            $area.off('click.fileUploader').on('click.fileUploader', '.file-uploader-button:first', function (e) {
+                e.preventDefault();
+                self.triggerFileBrowser($area);
+            });
+            $dropZone.off('click.fileUploader').on('click.fileUploader', '.file-uploader-placeholder', function (e) {
+                e.preventDefault();
+                self.triggerFileBrowser($area);
             });
         },
 
@@ -216,11 +258,14 @@ define([
          * @param value
          * @returns {Promise<void>}
          */
-        async setImageSize(value) {
-            let response = await fetch(value.url),
-                blob = await response.blob();
-
-            value.size = blob.size;
+        setImageSize: function (value) {
+            return fetch(value.url)
+                .then(function (response) {
+                    return response.blob();
+                })
+                .then(function (blob) {
+                    value.size = blob.size;
+                });
         },
 
         /**
@@ -614,6 +659,7 @@ define([
          */
         onElementRender: function (fileInput) {
             this.initUploader(fileInput);
+            this.bindFileBrowserTriggers(fileInput.id);
         },
 
         /**

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/file-uploader.test.js

@@ -1,6 +1,6 @@
 /**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
+ * Copyright 2016 Adobe
+ * All Rights Reserved.
  */
 
 /*eslint max-nested-callbacks: 0*/
@@ -402,14 +402,51 @@ define([
         });
 
         describe('onElementRender handler', function () {
-            it('invokes initUploader method', function () {
-                var input = document.createElement('input');
+            it('invokes initUploader and bindFileBrowserTriggers methods', function () {
+                let input = document.createElement('input');
+
+                input.id = 'test-file-input';
+                input.name = 'test-file-name';
+
+                const $dropZone = $('<div data-role="drop-zone"></div>'),
+                    $fileUploaderArea = $('<div class="file-uploader-area" upload-area-id="' + input.id + '">' +
+                        '<button class="file-uploader-button"></button></div>'),
+                    $placeholder = $('<div class="file-uploader-placeholder"></div>'),
+                    button = $fileUploaderArea.find('.file-uploader-button')[0],
+                    clickEvent = new MouseEvent('click', {bubbles: true, cancelable: true}),
+                    placeholder = $placeholder[0],
+                    clickEvent2 = new MouseEvent('click', {bubbles: true, cancelable: true});
+
+                $dropZone.append($fileUploaderArea);
+                $dropZone.append($placeholder);
+                $('body').append($dropZone);
 
                 spyOn(component, 'initUploader');
+                spyOn(component, 'bindFileBrowserTriggers').and.callThrough();
+                spyOn(component, 'triggerFileBrowser');
 
                 component.onElementRender(input);
 
                 expect(component.initUploader).toHaveBeenCalledWith(input);
+                expect(component.bindFileBrowserTriggers).toHaveBeenCalledWith(input.id);
+
+                button.dispatchEvent(clickEvent);
+                expect(component.triggerFileBrowser).toHaveBeenCalled();
+
+                // eslint-disable-next-line one-var
+                const arg1 = component.triggerFileBrowser.calls.first().args[0];
+
+                expect(arg1[0]).toBe($fileUploaderArea[0]);
+
+                placeholder.dispatchEvent(clickEvent2);
+                expect(component.triggerFileBrowser.calls.count()).toBe(2);
+
+                // eslint-disable-next-line one-var
+                const arg2 = component.triggerFileBrowser.calls.mostRecent().args[0];
+
+                expect(arg2[0]).toBe($fileUploaderArea[0]);
+
+                $dropZone.remove();
             });
         });