added support for new extesnions in the file input with test cases

rajatkhurana-adobe · rajatkhurana-adobe · commit ac35d0c50a04 · 2025-04-25T12:56:37.000+05:30
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java
@@ -123,6 +123,7 @@ private ReservedProperties() {
     public static final String PN_UNCHECKED_VALUE = "uncheckedValue";
     public static final String PN_MAX_FILE_SIZE = "maxFileSize";
     public static final String PN_FILE_ACCEPT = "accept";
+    public static final String PN_FILE_ACCEPT_EXTENSIONS = "acceptExtensions";
     public static final String PN_BUTTON_TEXT = "buttonText";
     public static final String PN_WRAP_DATA = "wrapData";
     public static final String PN_FRAGMENT_PATH = "fragmentPath";
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/FileInputImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/FileInputImpl.java
@@ -57,6 +57,9 @@ public class FileInputImpl extends AbstractFieldImpl implements FileInput {
     @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = ReservedProperties.PN_FILE_ACCEPT)
     protected String[] accept;
 
+    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = ReservedProperties.PN_FILE_ACCEPT_EXTENSIONS)
+    protected String[] acceptExtensions;
+
     @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = ReservedProperties.PN_BUTTON_TEXT)
     @Default(values = FileInput.DEFAULT_BUTTON_TEXT)
     protected String buttonText;
@@ -122,6 +125,13 @@ public List<String> getAccept() {
             .orElse(Collections.emptyList());
     }
 
+    @Override
+    public List<String> getAcceptExtensions() {
+        return Optional.ofNullable(acceptExtensions)
+            .map(Arrays::asList)
+            .orElse(Collections.emptyList());
+    }
+
     @Override
     public @NotNull Map<String, Object> getProperties() {
         Map<String, Object> customProperties = super.getProperties();
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/FileConstraint.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/FileConstraint.java
@@ -57,6 +57,10 @@ default List<String> getAccept() {
         return DEFAULT_ACCEPT;
     }
 
+    default List<String> getAcceptExtensions() {
+        return Collections.emptyList();
+    }
+
     /**
      * The constraint is
      * applicable for file attachment field. If the type is {@code String}, the format will always be {@code data-url}.
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv2/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv2/basic/.content.xml
@@ -87,15 +87,6 @@
                     textIsRich="[true,true]"
                     type="file[]"
                     visible="{Boolean}true"/>
-                <fileinput6
-                    jcr:primaryType="nt:unstructured"
-                    jcr:title="File Input - 6"
-                    sling:resourceType="core/fd/components/form/fileinput/v2/fileinput"
-                    accept="[audio/*, video/*, image/*, text/*, application/pdf,.ifc]"
-                    fieldType="file-input"
-                    readOnly="{Boolean}false"
-                    name="fileinput6"
-                    type="file"/>
             <submit
                     jcr:lastModified="{Date}2023-01-17T16:28:58.844+05:30"
                     jcr:lastModifiedBy="admin"
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv3/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/fileinput/fileinputv3/basic/.content.xml
@@ -103,6 +103,15 @@
                     maxFileSize="2"
                     type="file[]"
                     visible="{Boolean}true"/>
+             <fileinput7
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="File Input - 7"
+                    sling:resourceType="core/fd/components/form/fileinput/v2/fileinput"
+                    accept="[audio/*, video/*, image/*, text/*, application/pdf,.ifc]"
+                    fieldType="file-input"
+                    readOnly="{Boolean}false"
+                    name="fileinput7"
+                    type="file"/>
             <submit
                     jcr:lastModified="{Date}2023-01-17T16:28:58.844+05:30"
                     jcr:lastModifiedBy="admin"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/_cq_dialog/.content.xml
@@ -144,7 +144,6 @@
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="fd/af/authoring/components/granite/form/formsmultifield"
                                                     fieldLabel="Allowed file types"
-                                                    fieldDescription="Specify the allowed file types using MIME types (for example, image/png, application/pdf) or file extensions (for example, .png, .pdf). Ensure that the specified extensions correspond to valid MIME types to avoid upload issues."
                                                     defaultValue="">
                                                 <field
                                                         name="./accept"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/_cq_dialog/.content.xml
@@ -87,7 +87,37 @@
                     </basic>
                     <validation
                         jcr:primaryType="nt:unstructured"
-                        sling:resourceType="granite/ui/components/coral/foundation/container"/>
+                        sling:resourceType="granite/ui/components/coral/foundation/container">
+                        <items jcr:primaryType="nt:unstructured">
+                            <columns
+                                    jcr:primaryType="nt:unstructured"
+                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
+                                    margin="{Boolean}true">
+                                <items jcr:primaryType="nt:unstructured">
+                                    <column
+                                            jcr:primaryType="nt:unstructured"
+                                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                                        <items jcr:primaryType="nt:unstructured">
+                                            <extensions
+                                                    jcr:primaryType="nt:unstructured"
+                                                    sling:resourceType="fd/af/authoring/components/granite/form/formsmultifield"
+                                                    fieldLabel="Allowed file extensions"
+                                                    fieldDescription="Specify the allowed file extensions (for example, .png, .pdf). Ensure that the specified extensions correspond to valid MIME types to avoid upload issues."
+                                                    defaultValue="">
+                                                <field
+                                                        name="./acceptExtensions"
+                                                        jcr:primaryType="nt:unstructured"
+                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
+                                            </extensions>
+                                            <acceptMessage
+                                                    jcr:primaryType="nt:unstructured"
+                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"/>
+                                        </items>
+                                    </column>
+                                </items>
+                            </columns>
+                        </items>
+                    </validation>
                     <help
                             jcr:primaryType="nt:unstructured"
                             jcr:title="Help Content"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
@@ -50,7 +50,7 @@
              name="${file.name}"
              disabled="${!file.enabled}"
              required="${file.required}"
-             accept="${file.accept}"
+             accept="${[file.accept, file.acceptExtensions] @ join=','}"
              type="file"
              data-cmp-data-layer="${file.data.json}"
         />
diff --git a/ui.frontend/src/view/FormFileInputWidgetBase.js b/ui.frontend/src/view/FormFileInputWidgetBase.js
@@ -454,24 +454,24 @@ class FormFileInputWidgetBase {
                             isCurrentInvalidFileName = false,
                             isCurrentInvalidMimeType = false;
                         currFileName = file.name.split("\\").pop();
-                        // Now size is in MB
-                        let size = file.size / 1024 / 1024;
-                        // check if file size limit is within limits
-                        if ((size > parseFloat(this.options.maxFileSize))) {
-                            isInvalidSize = isCurrentInvalidFileSize = true;
-                            inValidSizefileNames = currFileName + "," + inValidSizefileNames;
-                        } else if (!FileInputWidget.isValid(currFileName)) {
-                            // check if file names are valid (ie) there are no control characters in file names
-                            isInvalidFileName = isCurrentInvalidFileName = true;
-                            inValidNamefileNames = currFileName + "," + inValidNamefileNames;
-                        } else {
+                            // Now size is in MB
+                            let size = file.size / 1024 / 1024;
+                            // check if file size limit is within limits
+                            if ((size > parseFloat(this.options.maxFileSize))) {
+                                isInvalidSize = isCurrentInvalidFileSize = true;
+                                inValidSizefileNames = currFileName + "," + inValidSizefileNames;
+                            } else if (!FileInputWidget.isValid(currFileName)) {
+                                // check if file names are valid (ie) there are no control characters in file names
+                                isInvalidFileName = isCurrentInvalidFileName = true;
+                                inValidNamefileNames = currFileName + "," + inValidNamefileNames;
+                            } else {
                             let isMatch = false;
                             let extension = currFileName.split('.').pop().toLowerCase();
                             let mimeType = file.type || self.extensionToMimeTypeMap[extension];
                             
                             // If no MIME type is detected, check if the file extension is in the accept list
                             if (!mimeType) {
-                                isMatch = this.options.accept.some(function(acceptPattern) {
+                                isMatch = this.options.acceptExtensions.some(function(acceptPattern) {
                                     // Remove leading dot if present and convert to lowercase
                                     let cleanPattern = acceptPattern.replace(/^\./, '').toLowerCase();
                                     return cleanPattern === extension;
diff --git a/ui.tests/test-module/specs/fileinput/fileinput.authoring.cy.js b/ui.tests/test-module/specs/fileinput/fileinput.authoring.cy.js
@@ -60,7 +60,7 @@ describe('Page - Authoring', function () {
         "File"
     );
     cy.contains("Validation").should("exist");
-
+    
     // Checking some dynamic behaviours
     cy.get("[name='./multiSelection'][type=\"checkbox\"]").should("exist").check();
     cy.get(".cmp-adaptiveform-fileinput__minimumFiles").invoke('css', 'display').should('equal','block');
@@ -70,6 +70,19 @@ describe('Page - Authoring', function () {
     cy.deleteComponentByPath(fileInputDrop);
   }
 
+  const testFileInputValidationBehaviour = function(fileInputEditPathSelector, fileInputDrop, isSites) {
+    if (isSites) {
+      dropFileInputInSites();
+    } else {
+      dropFileInputInContainer();
+    }
+    cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + fileInputEditPathSelector);
+    cy.invokeEditableAction("[data-action='CONFIGURE']");
+    cy.contains("Validation").should("exist");
+    cy.get('._coral-Tabs-itemLabel').contains('Validation').click();
+    cy.contains("Allowed file extensions").should("exist");
+  }
+
   context('Open Forms Editor', function() {
     const pagePath = "/content/forms/af/core-components-it/blank",
         fileInputEditPath = pagePath + afConstants.FORM_EDITOR_FORM_CONTAINER_SUFFIX + "/fileinput",
@@ -110,5 +123,9 @@ describe('Page - Authoring', function () {
       testFileInputBehaviour(fileInputEditPathSelector, fileInputDrop, true);
     });
 
+    it('open edit dialog of aem forms FileInput and check validation', function() {
+      testFileInputValidationBehaviour(fileInputEditPathSelector, fileInputDrop, true);
+    });
+
   });
 });
diff --git a/ui.tests/test-module/specs/fileinput/fileinputv2.runtime.cy.js b/ui.tests/test-module/specs/fileinput/fileinputv2.runtime.cy.js
@@ -249,24 +249,6 @@ describe("Form with File Input V-2 - Basic Tests", () => {
         const fileInput5 =  "input[name='fileinput5']";
         cy.get(fileInput5).should("have.attr", "disabled", "disabled"); 
     });
-
-    it(`file input should not support extenstion which are not in accept property`, () => {
-        const fileInput6 =  "input[name='fileinput6']";
-        cy.attachFile(fileInput6, ['sample.afe']);
-        cy.get('.cmp-adaptiveform-fileinput__filelist')
-            .children()
-            .should('have.length', 0);
-    });
-
-    it(`fileinput should support custom file extensions`, () => {
-        const fileInput6 =  "input[name='fileinput6']";
-        cy.attachFile(fileInput6, ['sample.ifc']);
-        cy.get('.cmp-adaptiveform-fileinput__filelist')
-            .children()
-            .should('have.length', 1)
-            .and('contain.text', 'sample.ifc');
-    });
-
 })
 
 describe("V-2 drag and drop functionality", () => {
diff --git a/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js b/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js
@@ -248,4 +248,21 @@ describe('Click on button tag (V-3)', () => {
             expect(alertText).to.equal(model.getState().constraintMessages.maxFileSize);
         });
      });
+
+    it(`file input should not support extenstion which are not in accept property`, () => {
+        const fileinput7 =  "input[name='fileinput7']";
+        cy.attachFile(fileInput7, ['sample.afe']);
+        cy.get('.cmp-adaptiveform-fileinput__filelist')
+            .children()
+            .should('have.length', 0);
+    });
+
+    it(`fileinput should support custom file extensions`, () => {
+        const fileInput7 =  "input[name='fileinput7']";
+        cy.attachFile(fileInput7, ['sample.ifc']);
+        cy.get('.cmp-adaptiveform-fileinput__filelist')
+            .children()
+            .should('have.length', 1)
+            .and('contain.text', 'sample.ifc');
+    });
 })
