From 5b520045c86ddbdab9b363b6349cd4efba6468be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Ostafin?= Date: Mon, 1 Feb 2021 12:29:37 +0100 Subject: [PATCH] EZEE-3435: [Image upload] no validation message for files bigger than 2mb (#1698) --- .../scripts/fieldType/base/base-file-field.js | 6 +++++- .../public/js/scripts/fieldType/ezbinaryfile.js | 17 ++++++++++++++--- .../public/js/scripts/fieldType/ezimage.js | 13 +++++++++++-- .../public/js/scripts/fieldType/ezimageasset.js | 13 +++++++++++-- .../public/js/scripts/fieldType/ezmedia.js | 11 ++++++++++- 5 files changed, 51 insertions(+), 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 index e0987f18fc..8bb2e78d81 100644 --- 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 index aa7ecd909a..31ef22ac02 100644 --- 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 index a9aadb728b..2d6c6b2efc 100644 --- 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 index 0306ac2d7d..7edd72a73d 100644 --- 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 index 2a64107a5e..99745ec6cc 100644 --- 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',