diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputwidget.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputwidget.js index 4829d4f7ab..e69bdb52e3 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputwidget.js +++ b/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(); + + } } } \ No newline at end of file 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 cedcc81030..cb19f5dfd2 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 @@ -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(); + + } } } \ No newline at end of file diff --git a/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js b/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js index fae36d3612..a8ed57606f 100644 --- a/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js +++ b/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'); }) 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 0ed305fa11..999b5b9147 100644 --- a/ui.tests/test-module/specs/fileinput/fileinputv4.runtime.cy.js +++ b/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'); });