ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2360 from ing-bank/fix/accept-attribute

Browse source 
Fix the bug that accept attribute in the input field didn't work properly
This commit is contained in:
ByoungYong Kim 2024-09-05 09:41:46 +02:00 committed by GitHub
commit ef4ad50aea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fair-tables-pay.md Normal file
View file

@ -0,0 +1,5 @@
---
"@lion/ui": patch
---
[input-file] fix the bug that accept attribute in the input field didn't work properly

2
packages/ui/components/input-file/src/FileHandle.js
View file

@ -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...

4
packages/ui/components/input-file/src/LionInputFile.js
View file

@ -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) {

25
packages/ui/components/input-file/test/lion-input-file.test.js
View file

@ -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`
<lion-input-file label="Select" accept=".txt"></lion-input-file>
`);
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`
<lion-input-file label="Select" accept="text/plain"></lion-input-file>
@ -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`
<lion-input-file label="Select" accept="jpg, png, pdf"></lion-input-file>
`);
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 () => {