Merge pull request #1687 from adobe/fileinput_deleteIcon

@fix: file attachment delete correct file when duplicate names of files

Author: anshikag-adobe

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputwidget.js

@@ -89,5 +89,40 @@ if (typeof window.FileInputWidget === 'undefined') {
             fileItem.appendChild(fileEndContainer);
             return fileItem;
         }
+
+        handleClick (event){
+            let elem = event.target,
+                text = elem.parentElement.previousSibling.textContent,
+                index = this.getIndexOfText(text, elem.parentElement),
+                url = elem.parentElement.previousSibling.dataset.key,
+                objectUrl = elem.parentElement.previousSibling.dataset.objectUrl;   
+            if (index !== -1) {
+                this.values.splice(index, 1);
+                this.fileArr.splice(index, 1);
+                // set the model with the new value
+                this.model.value = this.fileArr;
+                // value and fileArr contains items of both URL and file types, hence while removing from DOM
+                // get the correct index as per this.#widget.files
+                let domIndex = Array.from(this.widget.files).findIndex(function(file) {
+                return file.name === text;
+                });
+                this.deleteFilesFromInputDom([domIndex]);
+                if (url != null) {
+                    // remove the data so that others don't use this url
+                    delete elem.parentElement.previousSibling.dataset.key;
+                }
+                if(objectUrl) {
+                    // revoke the object URL to avoid memory leaks in browser
+                    // since file is anyways getting deleted, remove the object URL's too
+                    window.URL.revokeObjectURL(objectUrl);
+                }
+            }
+            // Remove the dom from view
+            //All bound events and jQuery data associated with the element are also removed
+            elem.parentElement.parentElement.remove();
+            // Set the focus on file upload button after click of close
+            this.widget.focus();
+
+        }
     }
 }

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v4/fileinput/clientlibs/site/js/fileinputwidget.js

@@ -188,5 +188,40 @@ if (typeof window.FileInputWidget === 'undefined') {
             };
             return messages[invalidFeature];
         }
+
+        handleClick (event){
+            let elem = event.target,
+                text = elem.parentElement.previousSibling.textContent,
+                index = this.getIndexOfText(text, elem.parentElement),
+                url = elem.parentElement.previousSibling.dataset.key,
+                objectUrl = elem.parentElement.previousSibling.dataset.objectUrl;   
+            if (index !== -1) {
+                this.values.splice(index, 1);
+                this.fileArr.splice(index, 1);
+                // set the model with the new value
+                this.model.value = this.fileArr;
+                // value and fileArr contains items of both URL and file types, hence while removing from DOM
+                // get the correct index as per this.#widget.files
+                let domIndex = Array.from(this.widget.files).findIndex(function(file) {
+                return file.name === text;
+                });
+                this.deleteFilesFromInputDom([domIndex]);
+                if (url != null) {
+                    // remove the data so that others don't use this url
+                    delete elem.parentElement.previousSibling.dataset.key;
+                }
+                if(objectUrl) {
+                    // revoke the object URL to avoid memory leaks in browser
+                    // since file is anyways getting deleted, remove the object URL's too
+                    window.URL.revokeObjectURL(objectUrl);
+                }
+            }
+            // Remove the dom from view
+            //All bound events and jQuery data associated with the element are also removed
+            elem.parentElement.parentElement.remove();
+            // Set the focus on file upload button after click of close
+            this.widget.focus();
+
+        }
     }
 }

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

@@ -173,6 +173,20 @@ describe("Form with File Input V-3 - Basic Tests", () => {
         getFormObjTest(['empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf'])
     });
 
+    it("check delete functionality of duplicate files", () => {
+        let sampleFileNames = ['sample2.txt', 'sample.txt', 'sample2.txt'];
+        const fileInput = "input[name='fileinput1']";
+        
+        // Attach files
+        cy.attachFile(fileInput, [sampleFileNames[0]]);
+        cy.attachFile(fileInput, [sampleFileNames[1]]);
+        cy.attachFile(fileInput, [sampleFileNames[2]]);
+
+        deleteSelectedFiles(fileInput, sampleFileNames);
+
+        cy.get('.cmp-adaptiveform-fileinput__fileitem').should('have.length', 0);
+    });
+
     it("should toggle description and tooltip", () => {
         cy.toggleDescriptionTooltip(bemBlock, 'fileinput_tooltip_scenario_test');
     })

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

@@ -181,6 +181,20 @@ describe("Form with File Input V-4 - Basic Tests", () => {
         getFormObjTest(['empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf'])
     });
 
+    it("check delete functionality of duplicate files", () => {
+        let sampleFileNames = ['sample2.txt', 'sample.txt', 'sample2.txt'];
+        const fileInput = "input[name='fileinput1']";
+        
+        // Attach files
+        cy.attachFile(fileInput, [sampleFileNames[0]]);
+        cy.attachFile(fileInput, [sampleFileNames[1]]);
+        cy.attachFile(fileInput, [sampleFileNames[2]]);
+
+        deleteSelectedFiles(fileInput, sampleFileNames);
+
+        cy.get('.cmp-adaptiveform-fileinput__fileitem').should('have.length', 0);
+    });
+
     it("should toggle description and tooltip", () => {
         cy.toggleDescriptionTooltip(bemBlock, 'fileinput_tooltip_scenario_test');
     });