feat: multiple files input

Co-Authored-By: Entaigner <61445450+entaigner@users.noreply.github.com>
This commit is contained in:
Timothy J. Baek 2024-04-20 13:41:16 -05:00
parent cd79afb425
commit 97d68a6a05

View file

@ -328,27 +328,28 @@
]; ];
}; };
const inputFiles = e.dataTransfer?.files; const inputFiles = Array.from(e.dataTransfer?.files);
if (inputFiles && inputFiles.length > 0) { if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0]; inputFiles.forEach((file) => {
console.log(file, file.name.split('.').at(-1)); console.log(file, file.name.split('.').at(-1));
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else if ( } else if (
SUPPORTED_FILE_TYPE.includes(file['type']) || SUPPORTED_FILE_TYPE.includes(file['type']) ||
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
) { ) {
uploadDoc(file); uploadDoc(file);
} else { } else {
toast.error( toast.error(
$i18n.t( $i18n.t(
`Unknown File Type '{{file_type}}', but accepting and treating as plain text`, `Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
{ file_type: file['type'] } { file_type: file['type'] }
) )
); );
uploadDoc(file); uploadDoc(file);
} }
});
} else { } else {
toast.error($i18n.t(`File not found.`)); toast.error($i18n.t(`File not found.`));
} }
@ -467,6 +468,7 @@
bind:files={inputFiles} bind:files={inputFiles}
type="file" type="file"
hidden hidden
multiple
on:change={async () => { on:change={async () => {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
@ -482,25 +484,27 @@
}; };
if (inputFiles && inputFiles.length > 0) { if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0]; const _inputFiles = Array.from(inputFiles);
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { _inputFiles.forEach((file) => {
reader.readAsDataURL(file); if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
} else if ( reader.readAsDataURL(file);
SUPPORTED_FILE_TYPE.includes(file['type']) || } else if (
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) SUPPORTED_FILE_TYPE.includes(file['type']) ||
) { SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
uploadDoc(file); ) {
filesInputElement.value = ''; uploadDoc(file);
} else { filesInputElement.value = '';
toast.error( } else {
$i18n.t( toast.error(
`Unknown File Type '{{file_type}}', but accepting and treating as plain text`, $i18n.t(
{ file_type: file['type'] } `Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
) { file_type: file['type'] }
); )
uploadDoc(file); );
filesInputElement.value = ''; uploadDoc(file);
} filesInputElement.value = '';
}
});
} else { } else {
toast.error($i18n.t(`File not found.`)); toast.error($i18n.t(`File not found.`));
} }