feat: multiple files input

Co-Authored-By: Entaigner <[email protected]>
JTHesse · Apr 20, 2024 · 97d68a6 · 97d68a6
1 parent cd79afb
commit 97d68a6
Showing 1 changed file with 42 additions and 38 deletions.
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
@@ -328,27 +328,28 @@
 					];
 				};
 
-				const inputFiles = e.dataTransfer?.files;
+				const inputFiles = Array.from(e.dataTransfer?.files);
 
 				if (inputFiles && inputFiles.length > 0) {
-					const file = inputFiles[0];
-					console.log(file, file.name.split('.').at(-1));
-					if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
-						reader.readAsDataURL(file);
-					} else if (
-						SUPPORTED_FILE_TYPE.includes(file['type']) ||
-						SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
-					) {
-						uploadDoc(file);
-					} else {
-						toast.error(
-							$i18n.t(
-								`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
-								{ file_type: file['type'] }
-							)
-						);
-						uploadDoc(file);
-					}
+					inputFiles.forEach((file) => {
+						console.log(file, file.name.split('.').at(-1));
+						if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
+							reader.readAsDataURL(file);
+						} else if (
+							SUPPORTED_FILE_TYPE.includes(file['type']) ||
+							SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
+						) {
+							uploadDoc(file);
+						} else {
+							toast.error(
+								$i18n.t(
+									`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+									{ file_type: file['type'] }
+								)
+							);
+							uploadDoc(file);
+						}
+					});
 				} else {
 					toast.error($i18n.t(`File not found.`));
 				}
@@ -467,6 +468,7 @@
 					bind:files={inputFiles}
 					type="file"
 					hidden
+					multiple
 					on:change={async () => {
 						let reader = new FileReader();
 						reader.onload = (event) => {
@@ -482,25 +484,27 @@
 						};
 
 						if (inputFiles && inputFiles.length > 0) {
-							const file = inputFiles[0];
-							if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
-								reader.readAsDataURL(file);
-							} else if (
-								SUPPORTED_FILE_TYPE.includes(file['type']) ||
-								SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
-							) {
-								uploadDoc(file);
-								filesInputElement.value = '';
-							} else {
-								toast.error(
-									$i18n.t(
-										`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
-										{ file_type: file['type'] }
-									)
-								);
-								uploadDoc(file);
-								filesInputElement.value = '';
-							}
+							const _inputFiles = Array.from(inputFiles);
+							_inputFiles.forEach((file) => {
+								if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
+									reader.readAsDataURL(file);
+								} else if (
+									SUPPORTED_FILE_TYPE.includes(file['type']) ||
+									SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
+								) {
+									uploadDoc(file);
+									filesInputElement.value = '';
+								} else {
+									toast.error(
+										$i18n.t(
+											`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+											{ file_type: file['type'] }
+										)
+									);
+									uploadDoc(file);
+									filesInputElement.value = '';
+								}
+							});
 						} else {
 							toast.error($i18n.t(`File not found.`));
 						}