From 39005e75e0cf88a29bd674a3598823f8732174a3 Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Tue, 10 Jun 2025 00:46:04 +0100
Subject: [PATCH] refactor: update file upload handling to support multiple
 files

---
 src/components/Controlbar.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Controlbar.tsx b/src/components/Controlbar.tsx
index 54de524..0322b68 100644
--- a/src/components/Controlbar.tsx
+++ b/src/components/Controlbar.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
     const loaded = useNanostore$<boolean>(areFilesLoaded);
     const files = useNanostore$<StereoFile[]>(dashboardFiles);
     const fileInputRef = useSignal<HTMLInputElement>();
-    const uploadingFile = useSignal<NoSerialize<File> | undefined>();
+    const uploadingFiles = useSignal<NoSerialize<File[]> | undefined>();
     const now = useSignal(new Date());
 
     useVisibleTask$(() => {
@@ -20,18 +20,22 @@ export default component$(() => {
         return () => clearInterval(interval);
     });
 
-    const uploadFile = $(async () => {
-        if (!uploadingFile.value) {
-            console.error("No file selected for upload.");
+    const uploadFiles = $(async () => {
+        if (!uploadingFiles.value) {
+            console.error("No file(s) selected for upload.");
             return;
         }
 
         try {
-            const unsafe = uploadingFile.value as File;
-            const name = unsafe.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
-            const f = new File([unsafe], name, { type: unsafe.type });
+            const ufiles = uploadingFiles.value as File[];
+            
+            for (const file of ufiles) {
+                const name = file.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
+                const f = new File([file], name, { type: file.type });
+
+                await api.upload(f);
+            }
 
-            await api.upload(f);
             files.value = await api.list();
         } catch (error) {
             console.error("Error uploading file:", error);
@@ -44,9 +48,10 @@ export default component$(() => {
                 ref={fileInputRef}
                 style="display: none;"
                 onChange$={async (e: Event) => {
-                    uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
-                    await uploadFile();
+                    uploadingFiles.value = noSerialize(Object.values((e.target as HTMLInputElement).files || {}));
+                    await uploadFiles();
                 }}
+                multiple
             />
             
             <div class="flex items-center gap-2">