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

… 2mb
ezsystems · Feb 1, 2021 · ebb9824 · ebb9824
1 parent c982d65
commit ebb9824
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 44 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
@@ -1,5 +1,5 @@
-(function (global) {
-    const eZ = global.eZ = global.eZ || {};
+(function(global) {
+    const eZ = (global.eZ = global.eZ || {});
     const SELECTOR_FIELD_LABEL = '.ez-field-edit__label-wrapper .ez-field-edit__label';
 
     class BaseFileFieldValidator extends global.eZ.BaseFieldValidator {
@@ -14,40 +14,42 @@
             const input = event.currentTarget;
             const dataContainer = this.fieldContainer.querySelector('.ez-field-edit__data');
             const label = this.fieldContainer.querySelector(SELECTOR_FIELD_LABEL).innerHTML;
-            const isRequired = (input.required || this.fieldContainer.classList.contains('ez-field-edit--required'));
+            const isRequired = input.required || this.fieldContainer.classList.contains('ez-field-edit--required');
             const dataMaxSize = +input.dataset.maxFileSize;
             const maxFileSize = parseInt(dataMaxSize, 10);
-            const isEmpty = input.files &&
-                !input.files.length &&
-                dataContainer &&
-                !dataContainer.hasAttribute('hidden');
+            const isEmpty = input.files && !input.files.length && dataContainer && !dataContainer.hasAttribute('hidden');
             let result = { isError: false };
 
             if (isRequired && isEmpty) {
                 result = {
                     isError: true,
-                    errorMessage: global.eZ.errors.emptyField.replace('{fieldName}', label)
+                    errorMessage: global.eZ.errors.emptyField.replace('{fieldName}', label),
                 };
             }
 
             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
          *
-         * @method showFileSizeError
+         * @method showFileSizeNotice
          * @returns {Object}
          */
         showFileSizeError() {
             const label = this.fieldContainer.querySelector(SELECTOR_FIELD_LABEL).innerHTML;
+
             const result = {
                 isError: true,
-                errorMessage: global.eZ.errors.invalidFileSize.replace('{fieldName}', label)
+                errorMessage: global.eZ.errors.invalidFileSize.replace('{fieldName}', label),
             };
 
             return result;

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) {
+(function(global) {
     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 global.eZ.BasePreviewField {
         /**
@@ -50,8 +51,18 @@
         }
     }
 
-    [...document.querySelectorAll(SELECTOR_FIELD)].forEach(fieldContainer => {
-        const validator = new global.eZ.BaseFileFieldValidator({
+    class EzBinaryFileFieldValidator extends global.eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('invalidFileSize'));
+
+            return {
+                isError: false,
+            };
+        }
+    }
+
+    [...document.querySelectorAll(SELECTOR_FIELD)].forEach((fieldContainer) => {
+        const validator = new EzBinaryFileFieldValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
             eventsMap: [
@@ -66,19 +77,17 @@
                     selector: `input[type="file"]`,
                     eventName: 'invalidFileSize',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
                 },
             ],
         });
         const previewField = new EzBinaryFilePreviewField({
             validator,
-            fieldContainer
+            fieldContainer,
         });
 
         previewField.init();
 
-        global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ?
-            [...global.eZ.fieldTypeValidators, validator] :
-            [validator];
-    })
+        global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? [...global.eZ.fieldTypeValidators, validator] : [validator];
+    });
 })(window);
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
@@ -4,6 +4,7 @@
     const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper';
     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 SELECTOR_FILESIZE_NOTICE = '.ez-data-source__message--filesize';
 
     class EzImageFilePreviewField extends global.eZ.BasePreviewField {
         /**
@@ -48,15 +49,14 @@
     }
 
     class EzImageFieldValidator extends global.eZ.BaseFileFieldValidator {
-        toggleInvalidState(isError, config, input) {
-            super.toggleInvalidState(isError, config, input);
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('invalidFileSize'));
 
-            const container = input.closest('.ez-field-edit--ezimage');
-            const method = !!container.querySelector(`.${this.classInvalid}`) ? 'add' : 'remove';
-
-            container.classList[method](this.classInvalid);
+            return {
+                isError: false,
+            };
         }
-
+        
         /**
          * Validates the alternative text input
          *
@@ -80,7 +80,7 @@
         }
     }
 
-    [...document.querySelectorAll(SELECTOR_FIELD)].forEach((fieldContainer) => {
+    [...document.querySelectorAll(SELECTOR_FIELD) ].forEach((fieldContainer) => {
         const validator = new EzImageFieldValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
@@ -103,7 +103,7 @@
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'invalidFileSize',
                     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 siteaccess = doc.querySelector('meta[name="SiteAccess"]').content;
     const showErrorNotification = eZ.helpers.notification.showErrorNotification;
@@ -242,7 +243,15 @@
         }
     }
 
-    class EzImageAssetFieldValidator extends eZ.BaseFileFieldValidator {}
+    class EzImageAssetFieldValidator extends eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('invalidFileSize'));
+
+            return {
+                isError: false,
+            };
+        }
+    }
 
     doc.querySelectorAll(SELECTOR_FIELD).forEach((fieldContainer) => {
         const validator = new EzImageAssetFieldValidator({
@@ -260,7 +269,7 @@
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'invalidFileSize',
                     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
@@ -1,4 +1,4 @@
-(function (global) {
+(function(global) {
     const SELECTOR_FIELD = '.ez-field-edit--ezmedia';
     const SELECTOR_PREVIEW = '.ez-field-edit__preview';
     const SELECTOR_MEDIA = '.ez-field-edit-preview__media';
@@ -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 global.eZ.BaseFileFieldValidator {
+        validateFileSize(event) {
+            event.currentTarget.dispatchEvent(new CustomEvent('invalidFileSize'));
+
+            return {
+                isError: false,
+            };
+        }
+
         /**
          * Updates the state of checkbox indicator.
          *
@@ -97,7 +106,7 @@
             const videoUrl = URL.createObjectURL(file);
 
             preview.querySelector('.ez-field-edit-preview__action--preview').href = videoUrl;
-            preview.querySelector(SELECTOR_MEDIA).setAttribute('src', videoUrl)
+            preview.querySelector(SELECTOR_MEDIA).setAttribute('src', videoUrl);
         }
 
         /**
@@ -149,7 +158,7 @@
         }
     }
 
-    [...document.querySelectorAll(SELECTOR_FIELD)].forEach(fieldContainer => {
+    [...document.querySelectorAll(SELECTOR_FIELD)].forEach((fieldContainer) => {
         const validator = new EzMediaValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
@@ -159,35 +168,36 @@
                     eventName: 'change',
                     callback: 'validateInput',
                     errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
-                }, {
+                },
+                {
                     isValueValidator: false,
                     selector: `${SELECTOR_INFO_WRAPPER}`,
                     eventName: 'click',
                     callback: 'updateState',
-                }, {
+                },
+                {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT_FILE,
                     eventName: 'invalidFileSize',
                     callback: 'showFileSizeError',
-                    errorNodeSelectors: [SELECTOR_LABEL_WRAPPER],
-                }, {
+                    errorNodeSelectors: [SELECTOR_FILESIZE_NOTICE],
+                },
+                {
                     selector: '.ez-field-edit-preview__dimensions .form-control',
                     eventName: 'blur',
                     callback: 'validateDimensions',
                     errorNodeSelectors: [`${SELECTOR_INFO_WRAPPER} .ez-field-edit-preview__label-wrapper`],
-                }
+                },
             ],
         });
         const previewField = new EzMediaPreviewField({
             validator,
             fieldContainer,
-            fileTypeAccept: fieldContainer.querySelector(SELECTOR_INPUT_FILE).accept
+            fileTypeAccept: fieldContainer.querySelector(SELECTOR_INPUT_FILE).accept,
         });
 
         previewField.init();
 
-        global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ?
-            [...global.eZ.fieldTypeValidators, validator] :
-            [validator];
-    })
+        global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? [...global.eZ.fieldTypeValidators, validator] : [validator];
+    });
 })(window);