Configured custom validation messages in file attachment (#1459)

Co-authored-by: Pavitra Khatri <pavitrakhatri@pavitras-mbp.corp.adobe.com>

Author: pavi41

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv3/basic/.content.xml

@@ -88,6 +88,21 @@
                     maxFileSize="2"
                     type="file[]"
                     visible="{Boolean}true"/>
+             <fileinput6
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="File Input - 6"
+                    sling:resourceType="core/fd/components/form/fileinput/v3/fileinput"
+                    accept="[audio/*, video/*, image/*, text/*, application/pdf]"
+                    buttonText="Attach Files"
+                    enabled="{Boolean}true"
+                    maxFileSizeMessage="File size is greater than the expected size!"
+                    fieldType="file-input"
+                    name="fileinput6"
+                    readOnly="{Boolean}true"
+                    textIsRich="[true,true]"
+                    maxFileSize="2"
+                    type="file[]"
+                    visible="{Boolean}true"/>
             <submit
                     jcr:lastModified="{Date}2023-01-17T16:28:58.844+05:30"
                     jcr:lastModifiedBy="admin"

ui.frontend/src/view/FormFileInputWidgetBase.js

@@ -298,15 +298,16 @@ class FormFileInputWidgetBase {
             }
         }
 
-        invalidMessage(fileName, invalidFeature){
-            // todo: have add localization here
-            if(invalidFeature === this.invalidFeature.SIZE) {
-                alert(FormView.LanguageUtils.getTranslatedString(this.lang, "FileSizeGreater", [fileName, this.options.maxFileSize]));
-            } else if (invalidFeature === this.invalidFeature.NAME) {
-                alert(FormView.LanguageUtils.getTranslatedString(this.lang, "FileNameInvalid", [fileName]));
-            } else if (invalidFeature === this.invalidFeature.MIMETYPE) {
-                alert(FormView.LanguageUtils.getTranslatedString(this.lang, "FileMimeTypeInvalid", [fileName]));
-            }
+        invalidMessage(fileName, invalidFeature) {
+            const customMessages = this.options.constraintMessages || {};
+        
+            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])
+            };
+        
+            alert(messages[invalidFeature]);
         }
 
 

ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js

@@ -236,4 +236,16 @@ describe('Click on button tag (V-3)', () => {
         });
 
     });
+
+    it('should display an error message configured by the user', () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[5];
+        const model = formContainer._model.getElement(id);
+
+        const fileInput = 'input[name=\'fileinput6\']';
+        cy.attachFile(fileInput, ['FileAttachment3mb.jpg']);
+ 
+        cy.on('window:alert', (alertText) => {
+            expect(alertText).to.equal(model.getState().constraintMessages.maxFileSize);
+        });
+     });
 })