MAGETWO-87641: Validation message displays many times after upload incorrect file extension

- Aggregate error messages and display error modal when upload chain has completed
- Add this functionality to media-uploader.js widget (used in catalog/product)

Author: danmooney2

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/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,20 @@ 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.
+         * @returns {Boolean|void} - false if further processing should halt or undefined if processing should continue
          */
-        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.
@@ -329,30 +345,45 @@ define([
                 target   = $(e.target);
 
             if (allowed.passed) {
-                target.on('fileuploadsend', function (event, postData) {
-                    postData.data.append('param_name', this.paramName);
-                }.bind(data));
-
                 target.fileupload('process', data).done(function () {
                     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 +398,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;
             }
         }