From 16f41e4a1e400a610158e44120155f38a9d804e0 Mon Sep 17 00:00:00 2001 From: ByoungYong Kim Date: Tue, 25 Jun 2024 16:22:56 +0200 Subject: [PATCH 1/4] fix: add files more than once doesn't overwrite anymore --- .../input-file/src/LionInputFile.js | 40 ++++++++++++++----- .../input-file/test/lion-input-file.test.js | 40 +++++++++++++++++-- 2 files changed, 67 insertions(+), 13 deletions(-) diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index b963018f0c..2ca8f07c2c 100644 --- a/packages/ui/components/input-file/src/LionInputFile.js +++ b/packages/ui/components/input-file/src/LionInputFile.js @@ -175,6 +175,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) /** @private */ this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false }); + /** + * @private + * @type {FileList | null} + */ + this.__previouslyParsedFiles = null; } /** @@ -282,8 +287,20 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) * @returns {InputFile[]} parsedValue */ parser() { - // @ts-ignore - return this._inputNode.files ? Array.from(this._inputNode.files) : []; + // parser is called twice for one user event; one for 'user-input-change', another for 'change' + if (this.__previouslyParsedFiles === this._inputNode.files) { + return this.modelValue; + } + this.__previouslyParsedFiles = this._inputNode.files; + + const files = this._inputNode.files + ? /** @type {InputFile[]} */ (Array.from(this._inputNode.files)) + : []; + if (this.multiple) { + return [...(this.modelValue ?? []), ...files]; + } + + return files; } /** @@ -481,15 +498,17 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) } this._inputNode.files = ev.dataTransfer.files; + + const computedFiles = this.__computeNewAddedFiles( + /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)), + ); + if (this.multiple) { + this.modelValue = [...(this.modelValue ?? []), ...computedFiles]; + } else { + this.modelValue = computedFiles; + } + // @ts-ignore - this.modelValue = Array.from(ev.dataTransfer.files); - // if same file is selected again, e.dataTransfer.files lists that file. - // So filter if the file already exists - // @ts-ignore - // const newFiles = this.__computeNewAddedFiles(Array.from(ev.dataTransfer.files)); - // if (newFiles.length > 0) { - // this._processFiles(newFiles); - // } this._processFiles(Array.from(ev.dataTransfer.files)); } @@ -623,6 +642,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) .map(({ systemFile }) => /** @type {InputFile} */ (systemFile)); if (_successFiles.length > 0) { + // this.modelValue = [...this.modelValue, _successFiles]; this._dispatchFileListChangeEvent(_successFiles); } } diff --git a/packages/ui/components/input-file/test/lion-input-file.test.js b/packages/ui/components/input-file/test/lion-input-file.test.js index 40558b53e0..617c4c66d5 100644 --- a/packages/ui/components/input-file/test/lion-input-file.test.js +++ b/packages/ui/components/input-file/test/lion-input-file.test.js @@ -1,7 +1,7 @@ import '@lion/ui/define/lion-input-file.js'; import { Required } from '@lion/ui/form-core.js'; import { getInputMembers } from '@lion/ui/input-test-helpers.js'; -import { expect, fixture as _fixture, html, oneEvent } from '@open-wc/testing'; +import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing'; import sinon from 'sinon'; /** @@ -556,19 +556,22 @@ describe('lion-input-file', () => { }); const fileListChangedEvent = await oneEvent(el, 'file-list-changed'); filesListChanged(el, fileListChangedEvent); - await el.updateComplete; + await elementUpdated(el); // @ts-expect-error [allow-protected-in-test] expect(el._selectedFilesMetaData.length).to.equal(2); + expect(el.modelValue.length).to.equal(2); setTimeout(() => { mimicSelectFile(el, [file3, file4]); }); const fileListChangedEvent1 = await oneEvent(el, 'file-list-changed'); filesListChanged(el, fileListChangedEvent1); - await el.updateComplete; + await elementUpdated(el); + // @ts-expect-error [allow-protected-in-test] expect(el._selectedFilesMetaData.length).to.equal(4); + expect(el.modelValue.length).to.equal(4); }); it('should add multiple files and dispatch file-list-changed event ONLY with newly added file', async () => { @@ -958,6 +961,37 @@ describe('lion-input-file', () => { expect(el.hasAttribute('is-dragging')).to.equal(false); }); + it('should update modelValue on drop', async () => { + const list = new DataTransfer(); + // @ts-ignore + list.items.add(file); + const droppedFiles = list.files; + + // @ts-expect-error [allow-protected-in-test] + await el._processDroppedFiles({ + // @ts-ignore + dataTransfer: { files: droppedFiles, items: [{ name: 'test.txt' }] }, + preventDefault: () => {}, + }); + await el.updateComplete; + + expect(el.modelValue.length).to.equal(1); + + const list2 = new DataTransfer(); + // @ts-ignore + list2.items.add(file2); + + // @ts-expect-error [allow-protected-in-test] + await el._processDroppedFiles({ + // @ts-ignore + dataTransfer: { files: list2.files, items: [{ name: 'test2.txt' }] }, + preventDefault: () => {}, + }); + await el.updateComplete; + + expect(el.modelValue.length).to.equal(2); + }); + it('should call _processFiles method', async () => { const list = new DataTransfer(); // @ts-ignore From 4dee9142d43db1e1da0884f0b42bed58fada3a3f Mon Sep 17 00:00:00 2001 From: ByoungYong Kim Date: Thu, 27 Jun 2024 10:18:38 +0200 Subject: [PATCH 2/4] fix: Fix a bug when the same file is added on the single file input, the model value gets empty --- packages/ui/components/input-file/src/LionInputFile.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index 2ca8f07c2c..443b2b0c09 100644 --- a/packages/ui/components/input-file/src/LionInputFile.js +++ b/packages/ui/components/input-file/src/LionInputFile.js @@ -499,13 +499,13 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) this._inputNode.files = ev.dataTransfer.files; - const computedFiles = this.__computeNewAddedFiles( - /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)), - ); if (this.multiple) { + const computedFiles = this.__computeNewAddedFiles( + /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)), + ); this.modelValue = [...(this.modelValue ?? []), ...computedFiles]; } else { - this.modelValue = computedFiles; + this.modelValue = Array.from(ev.dataTransfer.files); } // @ts-ignore From bca882279fa76d8ac0caffb20e8285f3315f43c3 Mon Sep 17 00:00:00 2001 From: ByoungYong Kim Date: Thu, 27 Jun 2024 11:37:52 +0200 Subject: [PATCH 3/4] Fix a lint error, remove unnecessary lines --- packages/ui/components/input-file/src/LionInputFile.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index 443b2b0c09..9aa4ad9ab1 100644 --- a/packages/ui/components/input-file/src/LionInputFile.js +++ b/packages/ui/components/input-file/src/LionInputFile.js @@ -505,11 +505,10 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) ); this.modelValue = [...(this.modelValue ?? []), ...computedFiles]; } else { - this.modelValue = Array.from(ev.dataTransfer.files); + this.modelValue = /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)); } - // @ts-ignore - this._processFiles(Array.from(ev.dataTransfer.files)); + this._processFiles(/** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files))); } /** @@ -642,7 +641,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) .map(({ systemFile }) => /** @type {InputFile} */ (systemFile)); if (_successFiles.length > 0) { - // this.modelValue = [...this.modelValue, _successFiles]; this._dispatchFileListChangeEvent(_successFiles); } } From c4375018001ee5471df4dfc672c1936a69c422e4 Mon Sep 17 00:00:00 2001 From: ByoungYong Kim Date: Wed, 7 Aug 2024 12:13:51 +0200 Subject: [PATCH 4/4] Add changeset --- .changeset/dry-turkeys-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-turkeys-flash.md diff --git a/.changeset/dry-turkeys-flash.md b/.changeset/dry-turkeys-flash.md new file mode 100644 index 0000000000..e11c0f9ff0 --- /dev/null +++ b/.changeset/dry-turkeys-flash.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[input-file] add files more than once doesn't overwrite model value anymore