file upload

src/components/dashboard/Actionbar.tsx

@@ -1,6 +1,9 @@
-import { component$ } from "@builder.io/qwik";
+/* eslint-disable qwik/jsx-a */
+import { $, component$, useSignal } from "@builder.io/qwik";
 import { useNanostore$ } from "~/hooks/nanostores";
-import { isSettingsOpen } from "~/lib/stores";
+import { api } from "~/lib/api";
+import { isSettingsOpen, loadedFiles } from "~/lib/stores";
+import { StereoFile } from "~/lib/types";
 import { SolarLibraryLinear, SolarQuestionCircleLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons";
 
 export default component$(() => {
@@ -8,6 +11,30 @@ export default component$(() => {
     const total = 15;
 
     const settingsOpen = useNanostore$<boolean>(isSettingsOpen);
+    const fileInputRef = useSignal<HTMLInputElement>();
+    const files = useNanostore$<StereoFile[]>(loadedFiles, []);
+    
+    const handleFileChange = $(async (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        if (input.files && input.files.length > 0) {
+            const fi: File[] = Array.from(input.files);
+            
+            const metas: StereoFile[] = await Promise.all(
+                fi.map(async (file) => {
+                    try {
+                        const id = (await (await api.upload(file)).json()).id;
+                        return await api.meta(id);
+                    } catch (error) {
+                        console.error("actionbar: file upload failed:", error);
+                        throw new Error("File upload failed");
+                    }
+                })
+            );
+
+            input.value = "";
+            files.value = [...files.value, ...metas];
+        }
+    });
 
     return (
         <div class="absolute bottom-0 left-0 flex items-center justify-between py-7 px-16 w-full">
@@ -31,11 +58,25 @@ export default component$(() => {
             }} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
                 <a onClick$={() => settingsOpen.value = true}><StereoLogoLinear /></a>
                 <SolarLibraryLinear />
-                <SolarUploadMinimalisticLinear />
+                <a
+                    onClick$={(e) => {
+                        e.preventDefault();
+                        fileInputRef.value?.click();
+                    }}
+                >
+                    <SolarUploadMinimalisticLinear />
+                </a>
                 <SolarRoundedMagniferLinear />
                 <SolarSettingsLinear />
             </div>
 
+            <input
+                ref={fileInputRef}
+                type="file"
+                class="hidden"
+                onChange$={handleFileChange}
+            />
+
             <div style={{
                 borderRadius: "999px",
                 border: "0.5px solid #FF264E",