diff --git a/.changeset/fair-tables-pay.md b/.changeset/fair-tables-pay.md new file mode 100644 index 000000000..85efcfbb7 --- /dev/null +++ b/.changeset/fair-tables-pay.md @@ -0,0 +1,5 @@ +--- +"@lion/ui": patch +--- + +[input-file] fix the bug that accept attribute in the input field didn't work properly diff --git a/packages/ui/components/input-file/src/FileHandle.js b/packages/ui/components/input-file/src/FileHandle.js index 596407b55..3d186c092 100644 --- a/packages/ui/components/input-file/src/FileHandle.js +++ b/packages/ui/components/input-file/src/FileHandle.js @@ -53,7 +53,7 @@ export class FileHandle { */ // eslint-disable-next-line class-methods-use-this _getFileNameExtension(fileName) { - return fileName.slice(fileName.lastIndexOf('.') + 1); + return fileName.slice(fileName.lastIndexOf('.')); } // TODO: seems to suggest upload is going on... diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index b17a602b7..113866008 100644 --- a/packages/ui/components/input-file/src/LionInputFile.js +++ b/packages/ui/components/input-file/src/LionInputFile.js @@ -232,7 +232,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) /** @type {string[]} */ let allowedFileExtensions = []; if (this.accept) { - const acceptedFiles = this.accept.replace(/\s+/g, '').replace(/\.+/g, '').split(','); + const acceptedFiles = this.accept.replace(/\s+/g, '').split(','); allowedFileTypes = acceptedFiles.filter(acceptedFile => acceptedFile.includes('/')); allowedFileExtensions = acceptedFiles.filter(acceptedFile => !acceptedFile.includes('/')); } @@ -692,8 +692,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) if (allowedFileExtensions.length) { array = allowedFileExtensions; - // eslint-disable-next-line no-return-assign - array = array.map(item => (item = `.${item}`)); lastItem = array.pop(); arrayLength = array.length; } else if (allowedFileTypes.length) { 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 df576e633..b4c7db52e 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 @@ -158,6 +158,17 @@ describe('lion-input-file', () => { }) ); + it('error should not be there when the file extensions are accepted', async () => { + const el = await fixture(html` + + `); + + mimicSelectFile(el, [fileWrongType]); + await el.updateComplete; + + expect(el.hasFeedbackFor.length).to.equal(0); + }); + it('should not be added to the selected list', async () => { const el = await fixture(html` @@ -343,20 +354,6 @@ describe('lion-input-file', () => { expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.'); }); }); - - it('error message should add all file extensions to the validator message also works without dots "."', async () => { - const el = await fixture(html` - - `); - - mimicSelectFile(el, [fileWrongType]); - await el.updateComplete; - - // @ts-expect-error [allow-protected-in-test] - el._selectedFilesMetaData[0].validationFeedback?.forEach(error => { - expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.'); - }); - }); }); describe('invalid file sizes', async () => {