Merge pull request #2455 from magento-trigger/team3-delivery2

[Team 3] Sprint 6 Delivery Part 2

Author: heyitsroberthe

app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js

@@ -13,11 +13,19 @@ define([
     'jquery',
     'mage/template',
     'Magento_Ui/js/modal/alert',
+    'Magento_Ui/js/form/element/file-uploader',
     'mage/translate',
     'jquery/file-uploader'
-], function ($, mageTemplate, alert) {
+], function ($, mageTemplate, alert, FileUploader) {
     'use strict';
 
+    var fileUploader = new FileUploader({
+        dataScope: '',
+        isMultipleFiles: true
+    });
+
+    fileUploader.initUploader();
+
     $.widget('mage.mediaUploader', {
 
         /**
@@ -79,10 +87,9 @@ define([
                     if (data.result && !data.result.error) {
                         self.element.trigger('addItem', data.result);
                     } else {
-                        alert({
-                            content: $.mage.__('We don\'t recognize or support this file extension type.')
-                        });
+                        fileUploader.aggregateError(data.files[0].name, data.result.error);
                     }
+
                     self.element.find('#' + data.fileId).remove();
                 },
 
@@ -108,7 +115,9 @@ define([
                         .delay(2000)
                         .hide('highlight')
                         .remove();
-                }
+                },
+
+                stop: fileUploader.uploaderConfig.stop
             });
 
             this.element.find('input[type=file]').fileupload('option', {

app/code/Magento/Ui/Component/Form/Element/DataType/Media/Image.php

@@ -72,7 +72,7 @@ public function prepare()
                 'config' => [
                     'maxFileSize' => $maxFileSize,
                     'mediaGallery' => [
-                        'openDialogUrl' => $this->getContext()->getUrl('cms/wysiwyg_images/index'),
+                        'openDialogUrl' => $this->getContext()->getUrl('cms/wysiwyg_images/index', ['_secure' => true]),
                         'openDialogTitle' => $this->getConfiguration()['openDialogTitle'] ?? __('Insert Images...'),
                         'initialOpenSubpath' => $this->getConfiguration()['initialMediaGalleryOpenSubpath'],
                         'storeId' => $this->storeManager->getStore()->getId(),

app/code/Magento/Ui/i18n/en_US.csv

@@ -201,3 +201,4 @@ CSV,CSV
 "Please enter at least {0} characters.","Please enter at least {0} characters."
 "Please enter a value between {0} and {1} characters long.","Please enter a value between {0} and {1} characters long."
 "Please enter a value between {0} and {1}.","Please enter a value between {0} and {1}."
+"was not uploaded","was not uploaded"

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

@@ -13,13 +13,16 @@ define([
     'Magento_Ui/js/modal/alert',
     'Magento_Ui/js/lib/validation/validator',
     'Magento_Ui/js/form/element/abstract',
+    'mage/backend/notification',
+    'mage/translate',
     'jquery/file-uploader'
-], function ($, _, utils, uiAlert, validator, Element) {
+], function ($, _, utils, uiAlert, validator, Element, notification, $t) {
     'use strict';
 
     return Element.extend({
         defaults: {
             value: [],
+            aggregatedErrors: [],
             maxFileSize: false,
             isMultipleFiles: false,
             placeholderType: 'document', // 'image', 'video'
@@ -278,9 +281,15 @@ define([
          * @returns {FileUploader} Chainable.
          */
         notifyError: function (msg) {
-            uiAlert({
+            var data = {
                 content: msg
-            });
+            };
+
+            if (this.isMultipleFiles) {
+                data.modalClass = '_image-box';
+            }
+
+            uiAlert(data);
 
             return this;
         },
@@ -309,13 +318,19 @@ define([
         },
 
         /**
-         * Abstract handler which is invoked when files are choosed for upload.
+         * Handler which is invoked when files are choosed for upload.
          * May be used for implementation of aditional validation rules,
          * e.g. total files and a total size rules.
          *
-         * @abstract
+         * @param {Event} e - Event object.
+         * @param {Object} data - File data that will be uploaded.
          */
-        onFilesChoosed: function () {},
+        onFilesChoosed: function (e, data) {
+            // no option exists in fileuploader for restricting upload chains to single files; this enforces that policy
+            if (!this.isMultipleFiles) {
+                data.files.splice(1);
+            }
+        },
 
         /**
          * Handler which is invoked prior to the start of a file upload.
@@ -337,22 +352,41 @@ define([
                     data.submit();
                 });
             } else {
-                this.notifyError(allowed.message);
+                this.aggregateError(file.name, allowed.message);
+
+                // if all files in upload chain are invalid, stop callback is never called; this resolves promise
+                if (this.aggregatedErrors.length === data.originalFiles.length) {
+                    this.uploaderConfig.stop();
+                }
             }
         },
 
+        /**
+         * Add error message associated with filename for display when upload chain is complete
+         *
+         * @param {String} filename
+         * @param {String} message
+         */
+        aggregateError: function (filename, message) {
+            this.aggregatedErrors.push({
+                filename: filename,
+                message: message
+            });
+        },
+
         /**
          * Handler of the file upload complete event.
          *
          * @param {Event} e
          * @param {Object} data
          */
         onFileUploaded: function (e, data) {
-            var file    = data.result,
+            var uploadedFilename = data.files[0].name,
+                file    = data.result,
                 error   = file.error;
 
             error ?
-                this.notifyError(error) :
+                this.aggregateError(uploadedFilename, error) :
                 this.addFile(file);
         },
 
@@ -367,7 +401,45 @@ define([
          * Load stop event handler.
          */
         onLoadingStop: function () {
+            var aggregatedErrorMessages = [];
+
             this.isLoading = false;
+
+            if (!this.aggregatedErrors.length) {
+                return;
+            }
+
+            if (!this.isMultipleFiles) { // only single file upload occurred; use first file's error message
+                aggregatedErrorMessages.push(this.aggregatedErrors[0].message);
+            } else { // construct message from all aggregatedErrors
+                _.each(this.aggregatedErrors, function (error) {
+                    notification().add({
+                        error: true,
+                        message: '%s' + error.message, // %s to be used as placeholder for html injection
+
+                        /**
+                         * Adds constructed error notification to aggregatedErrorMessages
+                         *
+                         * @param {String} constructedMessage
+                         */
+                        insertMethod: function (constructedMessage) {
+                            var errorMsgBodyHtml = '<strong>%s</strong> %s.<br>'
+                                .replace('%s', error.filename)
+                                .replace('%s', $t('was not uploaded'));
+
+                            // html is escaped in message body for notification widget; prepend unescaped html here
+                            constructedMessage = constructedMessage.replace('%s', errorMsgBodyHtml);
+
+                            aggregatedErrorMessages.push(constructedMessage);
+                        }
+                    });
+                });
+            }
+
+            this.notifyError(aggregatedErrorMessages.join(''));
+
+            // clear out aggregatedErrors array for this completed upload chain
+            this.aggregatedErrors = [];
         },
 
         /**

app/design/adminhtml/Magento/backend/web/css/source/components/_modals_extend.less

@@ -80,7 +80,7 @@
     &.confirm,
     &.prompt {
         .modal-inner-wrap {
-            .message {
+            .message:not(.message-error) {
                 background: @modal-popup-colorless__background;
             }
         }

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

@@ -235,29 +235,77 @@ define([
 
         describe('onFileUploaded handler', function () {
             it('calls addFile method if upload was successful', function () {
+                spyOn(component, 'aggregateError');
                 spyOn(component, 'addFile');
 
                 component.onFileUploaded({}, {
+                    files: [{
+                        name: 'hello.jpg'
+                    }],
                     result: {
                         error: false
                     }
                 });
 
+                expect(component.aggregateError).not.toHaveBeenCalled();
                 expect(component.addFile).toHaveBeenCalled();
             });
 
-            it('calls notifyError method if upload resulted in error', function () {
-                spyOn(component, 'notifyError');
-                spyOn(component, 'addFile');
-
-                component.onFileUploaded({}, {
-                    result: {
-                        error: true
-                    }
+            it('should call uploaderConfig.stop when number of errors is equal to number of files', function () {
+                var fakeEvent = {
+                        target: document.createElement('input')
+                    },
+                    file = {
+                        name: 'hello.jpg'
+                    },
+                    data = {
+                        files: [file],
+                        originalFiles: [file]
+                    };
+
+                spyOn(component, 'isFileAllowed').and.callFake(function (fileArg) {
+                    expect(fileArg).toBe(file);
+
+                    return {
+                        passed: false,
+                        message: 'Not awesome enough'
+                    };
+                });
+                component.initUploader();
+                spyOn(component.uploaderConfig, 'done');
+                spyOn(component.uploaderConfig, 'stop');
+                component.onBeforeFileUpload(fakeEvent, data);
+                expect(component.uploaderConfig.stop).toHaveBeenCalled();
+            });
+            it('should not call uploaderConfig.stop when number of errors is unequal to number of files', function () {
+                var fakeEvent = {
+                        target: document.createElement('input')
+                    },
+                    file = {
+                        name: 'hello.jpg'
+                    },
+                    otherFileInQueue = {
+                        name: 'world.png'
+                    },
+                    data = {
+                        files: [file],
+                        originalFiles: [file, otherFileInQueue]
+                    };
+
+                component.initUploader();
+                spyOn(component.uploaderConfig, 'done');
+                spyOn(component.uploaderConfig, 'stop');
+                spyOn(component, 'isFileAllowed').and.callFake(function (fileArg) {
+                    expect(fileArg).toBe(file);
+
+                    return {
+                        passed: false,
+                        message: 'Not awesome enough'
+                    };
                 });
 
-                expect(component.notifyError).toHaveBeenCalled();
-                expect(component.addFile).not.toHaveBeenCalled();
+                component.onBeforeFileUpload(fakeEvent, data);
+                expect(component.uploaderConfig.stop).not.toHaveBeenCalled();
             });
         });
 
@@ -272,5 +320,18 @@ define([
                 expect(component.initUploader).toHaveBeenCalledWith(input);
             });
         });
+
+        describe('aggregateError method', function () {
+            it('should append onto aggregatedErrors array when called', function () {
+                spyOn(component.aggregatedErrors, 'push');
+
+                component.aggregateError('blah.jpg', 'File is too awesome');
+
+                expect(component.aggregatedErrors.push).toHaveBeenCalledWith({
+                    filename: 'blah.jpg',
+                    message: 'File is too awesome'
+                });
+            });
+        });
     });
 });