multi-file select

static/js/chat.js

@@ -61,7 +61,7 @@
 
 		const notification = make("div", "notification", "off-screen");
 
-		notification.textContent = msg;
+		notification.textContent = msg instanceof Error ? msg.message : msg;
 
 		$notifications.appendChild(notification);
 
@@ -84,8 +84,6 @@
 		notification.remove();
 	}
 
-	window.notify = notify;
-
 	function updateTitle() {
 		const title = chatTitle || (messages.length ? "New Chat" : "");
 
@@ -1112,7 +1110,7 @@
 				return;
 			}
 
-			notify(err.message);
+			notify(err);
 		}
 
 		titleController = null;
@@ -1329,6 +1327,8 @@
 
 				attachments.splice(index, 1);
 
+				storeValue("attachments", attachments);
+
 				el.remove();
 
 				$attachments.classList.toggle("has-files", !!attachments.length);
@@ -1506,17 +1506,11 @@
 	});
 
 	$upload.addEventListener("click", async () => {
-		const file = await selectFile(
+		const files = await selectFile(
 			// the ultimate list
 			".adoc,.bash,.bashrc,.bat,.c,.cc,.cfg,.cjs,.cmd,.conf,.cpp,.cs,.css,.csv,.cxx,.dockerfile,.dockerignore,.editorconfig,.env,.fish,.fs,.fsx,.gitattributes,.gitignore,.go,.gradle,.groovy,.h,.hh,.hpp,.htm,.html,.ini,.ipynb,.java,.jl,.js,.json,.jsonc,.jsx,.kt,.kts,.less,.log,.lua,.m,.makefile,.markdown,.md,.mjs,.mk,.mm,.php,.phtml,.pl,.pm,.profile,.properties,.ps1,.psql,.py,.pyw,.r,.rb,.rs,.rst,.sass,.scala,.scss,.sh,.sql,.svelte,.swift,.t,.toml,.ts,.tsv,.tsx,.txt,.vb,.vue,.xhtml,.xml,.xsd,.xsl,.xslt,.yaml,.yml,.zig,.zsh",
-			false
-		);
-
-		if (!file) {
-			return;
-		}
-
-		try {
+			true,
+			file => {
 				if (!file.name) {
 					file.name = "unknown.txt";
 				} else if (file.name.length > 512) {
@@ -1530,10 +1524,16 @@
 				} else if (file.content.length > 4 * 1024 * 1024) {
 					throw new Error("File is too big (max 4MB)");
 				}
+			},
+			notify
+		);
 
+		if (!files.length) {
+			return;
+		}
+
+		for (const file of files) {
 			pushAttachment(file);
-		} catch (err) {
-			notify(err.message);
 		}
 	});
 
@@ -1579,7 +1579,14 @@
 			return;
 		}
 
-		const file = await selectFile("application/json", true),
+		const file = await selectFile(
+				"application/json",
+				false,
+				file => {
+					file.content = JSON.parse(file.content);
+				},
+				notify
+			),
 			data = file?.content;
 
 		if (!data) {

static/js/lib.js

@@ -156,46 +156,67 @@ function lines(text) {
 	return count + 1;
 }
 
-function selectFile(accept, asJson = false) {
+function readFile(file, handler, onError = false) {
 	return new Promise(resolve => {
-		const input = make("input");
-
-		input.type = "file";
-		input.accept = accept;
-
-		input.onchange = () => {
-			const file = input.files[0];
-
-			if (!file) {
-				resolve(false);
-
-				return;
-			}
-
 		const reader = new FileReader();
 
 		reader.onload = () => {
-				let content = reader.result;
-
-				if (asJson) {
 			try {
-						content = JSON.parse(content);
-					} catch {
-						resolve(false);
-
-						return;
-					}
-				}
-
-				resolve({
+				const result = {
 					name: file.name,
-					content: content,
-				});
+					content: reader.result,
+				};
+
+				handler(result);
+
+				resolve(result);
+			} catch (err) {
+				onError?.(`${file.name}: ${err.message}`);
+
+				resolve(false);
+			}
 		};
 
 		reader.onerror = () => resolve(false);
 
 		reader.readAsText(file);
+	});
+}
+
+function selectFile(accept, multiple, handler, onError = false) {
+	return new Promise(resolve => {
+		const input = make("input");
+
+		input.type = "file";
+		input.accept = accept;
+		input.multiple = multiple;
+
+		input.onchange = async () => {
+			const files = input.files;
+
+			if (!files.length) {
+				resolve(false);
+
+				return;
+			}
+
+			const results = [];
+
+			for (const file of files) {
+				const result = await readFile(file, handler, onError);
+
+				if (result) {
+					results.push(result);
+				}
+			}
+
+			if (!results.length) {
+				resolve(false);
+
+				return;
+			}
+
+			resolve(multiple ? results : results[0]);
 		};
 
 		input.click();