#436: Cannot Drag and Drop Image to Upload Area in Banner, Slide in Safari, IE11 - Added new validation method with longer message

Author: hannahnida

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

@@ -8,10 +8,11 @@ define([
     'underscore',
     'uiRegistry',
     'Magento_Ui/js/form/element/image-uploader',
+    'Magento_Ui/js/lib/validation/validator',
     'Magento_PageBuilder/js/resource/resize-observer/ResizeObserver',
     'Magento_PageBuilder/js/events',
     'mage/translate'
-], function ($, _, uiRegistry, Uploader, ResizeObserver, events, $t) {
+], function ($, _, uiRegistry, Uploader, validator, ResizeObserver, events, $t) {
     'use strict';
 
     var initializedOnce = false;
@@ -80,6 +81,16 @@ define([
             new ResizeObserver(this.updateResponsiveClasses.bind(this)).observe(this.$uploadArea.get(0));
         },
 
+        /**
+         * Checks if extension of provided file is allowed.
+         * {@inheritDoc}
+         */
+        isExtensionAllowed: function (file) {
+            var fileExtensions = this.getAllowedFileExtensionsInCommaDelimitedFormat(),
+                fileExtensionMessage = this.translations.allowedFileTypes + ':\t' + fileExtensions;
+            return validator('validate-file-extension', file.name, this.allowedExtensions, fileExtensionMessage);
+        },
+
         /**
          * Remove draggable classes from dropzones
          * {@inheritDoc}

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -124,6 +124,23 @@ define([
         return !!style.width.length;
     }
 
+    /**
+     * Validate file extension.
+     *
+     * @param {String} name
+     * @param {String} types
+     * @returns {Boolean}
+     */
+    function validateFileExtension(name, types) {
+        var extension = name.split('.').pop().toLowerCase();
+
+        if (types && typeof types === 'string') {
+            types = types.split(' ');
+        }
+
+        return !types || !types.length || ~types.indexOf(extension);
+    }
+
     return function (validator) {
         var requiredInputRule = validator.getRule('required-entry');
 
@@ -254,6 +271,20 @@ define([
             $.mage.__('Please enter a valid number or calculation: Valid numbers must have an extension (px, %, pt, vh). Calculations must have white space around the + and - operators and cannot divide by zero.')//eslint-disable-line max-len
         );
 
+        validator.addRule(
+            'validate-file-extension',
+            function (name, types, additionalMessage) {
+                this.fileTypeErrorMessage = $.mage.__('We don\'t recognize or support this file extension type.');
+                if (additionalMessage) {
+                    this.fileTypeErrorMessage += ('\t' + additionalMessage);
+                }
+                return validateFileExtension(name, types);
+            },
+            function () {
+                return this.fileTypeErrorMessage;
+            }
+        );
+
         validateObjectField(validator, 'validate-number');
         validateObjectField(validator, 'less-than-equals-to');
         validateObjectField(validator, 'greater-than-equals-to');