From c49da2d46f873e1577cf25430783f9caa6c5a0b1 Mon Sep 17 00:00:00 2001 From: Farha Haroon Date: Wed, 22 Jul 2026 15:56:24 +0000 Subject: [PATCH] Fix custom accept error message not shown for unsupported file type in file input The file-input widget's invalidMessage() looked up constraintMessages.invalidMimeType for the unsupported-file-type alert, but invalidMimeType is not an authorable constraint message key - the schema only exposes constraintMessages.accept (backed by the acceptMessage dialog property). As a result the custom message authors configure for file type validation was always ignored in favor of the generic fallback string, while the analogous maxFileSize custom message worked correctly since its key matched. Updated both the webpack source (ui.frontend) and the apps clientlib copy (ui.af.apps) to read constraintMessages.accept, and added a Cypress assertion mirroring the existing maxFileSize custom-message test. --- .../samples/fileinput/fileinputv4/basic/.content.xml | 1 + .../v4/fileinput/clientlibs/site/js/fileinputwidget.js | 2 +- ui.frontend/src/view/FormFileInputWidgetBase.js | 2 +- .../specs/fileinput/fileinputv4.runtime.cy.js | 10 ++++++++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv4/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv4/basic/.content.xml index fd4851bff2..7133638f9e 100644 --- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv4/basic/.content.xml +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv4/basic/.content.xml @@ -108,6 +108,7 @@ jcr:title="File Input - 7" sling:resourceType="core/fd/components/form/fileinput/v4/fileinput" accept="[audio/*, video/*, image/*, text/*, application/pdf,.ifc]" + acceptMessage="This file type is not supported!" fieldType="file-input" readOnly="{Boolean}false" name="fileinput7" diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v4/fileinput/clientlibs/site/js/fileinputwidget.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v4/fileinput/clientlibs/site/js/fileinputwidget.js index 91708f50f0..a94441a5ec 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v4/fileinput/clientlibs/site/js/fileinputwidget.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v4/fileinput/clientlibs/site/js/fileinputwidget.js @@ -191,7 +191,7 @@ if (typeof window.FileInputWidget === 'undefined') { const messages = { [this.invalidFeature.SIZE]: customMessages.maxFileSize || FormView.LanguageUtils.getTranslatedString(this.lang, "FileSizeGreater", [fileNames, this.options.maxFileSize]), [this.invalidFeature.NAME]: customMessages.invalidFileName || FormView.LanguageUtils.getTranslatedString(this.lang, "FileNameInvalid", [fileNames]), - [this.invalidFeature.MIMETYPE]: customMessages.invalidMimeType || FormView.LanguageUtils.getTranslatedString(this.lang, "FileMimeTypeInvalid", [fileNames]), + [this.invalidFeature.MIMETYPE]: customMessages.accept || FormView.LanguageUtils.getTranslatedString(this.lang, "FileMimeTypeInvalid", [fileNames]), [this.invalidFeature.SIZE_ZERO]: customMessages.zeroFileSize || FormView.LanguageUtils.getTranslatedString(this.lang, "FileSizeZero", [fileNames]) }; return messages[invalidFeature]; diff --git a/ui.frontend/src/view/FormFileInputWidgetBase.js b/ui.frontend/src/view/FormFileInputWidgetBase.js index e0a4d52097..1589cd0f82 100644 --- a/ui.frontend/src/view/FormFileInputWidgetBase.js +++ b/ui.frontend/src/view/FormFileInputWidgetBase.js @@ -340,7 +340,7 @@ class FormFileInputWidgetBase { const messages = { [this.invalidFeature.SIZE]: customMessages.maxFileSize || FormView.LanguageUtils.getTranslatedString(this.lang, "FileSizeGreater", [fileName, this.options.maxFileSize]), [this.invalidFeature.NAME]: customMessages.invalidFileName || FormView.LanguageUtils.getTranslatedString(this.lang, "FileNameInvalid", [fileName]), - [this.invalidFeature.MIMETYPE]: customMessages.invalidMimeType || FormView.LanguageUtils.getTranslatedString(this.lang, "FileMimeTypeInvalid", [fileName]) + [this.invalidFeature.MIMETYPE]: customMessages.accept || FormView.LanguageUtils.getTranslatedString(this.lang, "FileMimeTypeInvalid", [fileName]) }; alert(messages[invalidFeature]); diff --git a/ui.tests/test-module/specs/fileinput/fileinputv4.runtime.cy.js b/ui.tests/test-module/specs/fileinput/fileinputv4.runtime.cy.js index 428f17e1c1..85df0a2ab9 100644 --- a/ui.tests/test-module/specs/fileinput/fileinputv4.runtime.cy.js +++ b/ui.tests/test-module/specs/fileinput/fileinputv4.runtime.cy.js @@ -272,6 +272,16 @@ describe('Click on button tag (V-4)', () => { }); }); + it('should display a custom error message configured by the user for unsupported file type', () => { + const [id, fieldView] = Object.entries(formContainer._fields)[6]; + const model = formContainer._model.getElement(id); + const fileInput = 'input[name=\'fileinput7\']'; + cy.attachFile(fileInput, ['sample.afe']); + cy.on('window:alert', (alertText) => { + expect(alertText).to.equal(model.getState().constraintMessages.accept); + }); + }); + it('file when uploaded again should give actual size', () => { let sampleFileNames = ['sample.svg']; const fileInput = "input[name='fileinput2']";