From ffc0ac4a22bd10cf2f52f56c49c9d992687d290e Mon Sep 17 00:00:00 2001
From: Nathan Sarrazin <sarrazin.nathan@gmail.com>
Date: Thu, 18 Jul 2024 12:58:12 +0200
Subject: [PATCH] feat(upload): Enable multi-file in dropzone (#1347)

---
 src/lib/components/chat/FileDropzone.svelte | 51 +++++++++++----------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/chat/FileDropzone.svelte b/src/lib/components/chat/FileDropzone.svelte
index 3de5c4246e9..263ee032d20 100644
--- a/src/lib/components/chat/FileDropzone.svelte
+++ b/src/lib/components/chat/FileDropzone.svelte
@@ -15,34 +15,37 @@
 			if (files.length > 0) {
 				files = [];
 			}
-			// get only the first file
-			// optionally: we need to handle multiple files, if we want to support document upload for example
-			// for multimodal we only support one image at a time but we could support multiple PDFs
 			if (event.dataTransfer.items[0].kind === "file") {
-				const file = event.dataTransfer.items[0].getAsFile();
-				if (file) {
-					// check if the file matches the mimeTypes
-					if (
-						!mimeTypes.some((mimeType: string) => {
-							const [type, subtype] = mimeType.split("/");
-							const [fileType, fileSubtype] = file.type.split("/");
-							return type === fileType && (subtype === "*" || fileSubtype === subtype);
-						})
-					) {
-						setErrorMsg(`File type not supported. Only allowed: ${mimeTypes.join(", ")}`);
-						files = [];
-						return;
-					}
+				for (let i = 0; i < event.dataTransfer.items.length; i++) {
+					const file = event.dataTransfer.items[i].getAsFile();
+
+					if (file) {
+						// check if the file matches the mimeTypes
+						// else abort
+						if (
+							!mimeTypes.some((mimeType: string) => {
+								const [type, subtype] = mimeType.split("/");
+								const [fileType, fileSubtype] = file.type.split("/");
+								return type === fileType && (subtype === "*" || fileSubtype === subtype);
+							})
+						) {
+							setErrorMsg(`Some file type not supported. Only allowed: ${mimeTypes.join(", ")}`);
+							files = [];
+							return;
+						}
+
+						// if file is bigger than 10MB abort
+						if (file.size > 10 * 1024 * 1024) {
+							setErrorMsg("Some file is too big. (10MB max)");
+							files = [];
+							return;
+						}
 
-					// if file is bigger than 10MB abort
-					if (file.size > 10 * 1024 * 1024) {
-						setErrorMsg("Image is too big. (2MB max)");
-						files = [];
-						return;
+						// add the file to the files array
+						files = [...files, file];
 					}
-					files = [file];
-					onDrag = false;
 				}
+				onDrag = false;
 			}
 		}
 	}