EZEE-3435: [Image upload] no validation message for files bigger than…

… 2mb (#1698)
ezsystems · Feb 1, 2021 · 5b52004 · 5b52004
1 parent 8ff7733
commit 5b52004
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 9 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js
@@ -27,12 +27,16 @@
             }
 
             if (!isEmpty && maxFileSize > 0 && input.files[0] && input.files[0].size > maxFileSize) {
-                result = this.showFileSizeError();
+                result = this.validateFileSize(event);
             }
 
             return result;
         }
 
+        validateFileSize(event) {
+            return this.showFileSizeError();
+        }
+
         /**
          * Displays an error message: file size exceeds maximum value
          *

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js b/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js
@@ -1,6 +1,7 @@
-(function (global, doc, eZ) {
+(function(global, doc, eZ) {
     const SELECTOR_FIELD = '.ez-field-edit--ezbinaryfile';
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
+    const SELECTOR_FILESIZE_NOTICE = '.ez-data-source__message--filesize';
 
     class EzBinaryFilePreviewField extends eZ.BasePreviewField {
         /**
@@ -24,8 +25,18 @@
         }
     }
 
+    class EzBinaryFileFieldValidator extends eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('ez-invalid-file-size'));
+
+            return {
+                isError: false,
+            };
+        }
+    }
+
     doc.querySelectorAll(SELECTOR_FIELD).forEach((fieldContainer) => {
-        const validator = new eZ.BaseFileFieldValidator({
+        const validator = new EzBinaryFileFieldValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
             eventsMap: [
@@ -40,7 +51,7 @@
                     selector: `input[type="file"]`,
                     eventName: 'ez-invalid-file-size',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
                 },
             ],
         });

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
@@ -2,6 +2,7 @@
     const SELECTOR_FIELD = '.ez-field-edit--ezimage';
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
+    const SELECTOR_FILESIZE_NOTICE = '.ez-data-source__message--filesize';
     const SELECTOR_ALT_WRAPPER = '.ez-field-edit-preview__image-alt';
     const SELECTOR_INPUT_ALT = '.ez-field-edit-preview__image-alt .ez-data-source__input';
     const EVENT_CANCEL_ERROR = 'ez-cancel-errors';
@@ -52,12 +53,20 @@
         toggleInvalidState(isError, config, input) {
             super.toggleInvalidState(isError, config, input);
 
-            const container = input.closest('.ez-field-edit--ezimage');
+            const container = this.getFieldTypeContainer(input.closest(this.fieldSelector));
             const method = !!container.querySelector(`.${this.classInvalid}`) ? 'add' : 'remove';
 
             container.classList[method](this.classInvalid);
         }
 
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('ez-invalid-file-size'));
+
+            return {
+                isError: false,
+            };
+        }
+
         /**
          * Validates the alternative text input
          *
@@ -104,7 +113,7 @@
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'ez-invalid-file-size',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
                 },
                 {
                     isValueValidator: false,

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js
@@ -3,6 +3,7 @@
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
     const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ez-data-source__destination-content-id';
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
+    const SELECTOR_FILESIZE_NOTICE = '.ez-data-source__message--filesize';
     const token = doc.querySelector('meta[name="CSRF-Token"]').content;
     const showErrorNotification = eZ.helpers.notification.showErrorNotification;
     const showSuccessNotification = eZ.helpers.notification.showSuccessNotification;
@@ -228,7 +229,15 @@
         }
     }
 
-    class EzImageAssetFieldValidator extends eZ.BaseFileFieldValidator {}
+    class EzImageAssetFieldValidator extends eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('ez-invalid-file-size'));
+
+            return {
+                isError: false,
+            };
+        }
+    }
 
     doc.querySelectorAll(SELECTOR_FIELD).forEach((fieldContainer) => {
         const validator = new EzImageAssetFieldValidator({
@@ -246,7 +255,7 @@
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'ez-invalid-file-size',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
                 },
             ],
         });

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js b/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js
@@ -7,8 +7,17 @@
     const SELECTOR_MEDIA_WRAPPER = '.ez-field-edit-preview__media-wrapper';
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
     const CLASS_MEDIA_WRAPPER_LOADING = 'ez-field-edit-preview__media-wrapper--loading';
+    const SELECTOR_FILESIZE_NOTICE = '.ez-data-source__message--filesize';
 
     class EzMediaValidator extends eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('ez-invalid-file-size'));
+
+            return {
+                isError: false,
+            };
+        }
+
         /**
          * Validates the dimensions inputs
          *
@@ -144,7 +153,7 @@
                     selector: SELECTOR_INPUT_FILE,
                     eventName: 'ez-invalid-file-size',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
                 },
                 {
                     selector: '.ez-field-edit-preview__dimensions .form-control',