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 () => {