fix proxy + file upload

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { $, component$, noSerialize, NoSerialize, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import ky from "ky";
 import Controlbar from "~/components/Controlbar";
@@ -11,6 +11,9 @@ import { StereoFile } from "~/lib/types";
 export default component$(() => {
 	const files = useSignal<StereoFile[]>([]);
 	const loaded = useSignal(false);
+
+	const uploadingFile = useSignal<NoSerialize<File> | undefined>();
+
 	useVisibleTask$(async () => {
 		const res: StereoFile[] | undefined
 		= await ky.get("/api/list", { 
@@ -23,10 +26,66 @@ export default component$(() => {
 		loaded.value = true;
 	})
 
+	useTask$(({ track }) => {
+		track(() => uploadingFile.value);
+		console.log("File input changed:", uploadingFile.value);
+	});
+
+	const uploadFile = $(
+		async () => {
+			if (!uploadingFile.value) {
+				console.error("No file selected for upload.");
+				return;
+			}
+
+			const formData = new FormData();
+			formData.append("file", uploadingFile.value as File);
+
+			try {
+				const response = await ky.post("/api/upload", {
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("token")}`
+					},
+					body: formData
+				});
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! status: ${response.status}`);
+				}
+
+				const res: StereoFile = await response.json();
+				files.value.push(res);
+				
+				loaded.value = false;
+				files.value = await ky.get("/api/list", {
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("token")}`
+					}
+				}).json();
+				loaded.value = true;
+				
+ 			} catch (e) { console.error(e) }
+		}
+	)
+
 	return (
 		<>
 			<Controlbar />
 			<a href={OAUTH_LINK}>oauth</a>
+			<input
+				onChange$={(e: Event) => {
+					const target = e.target as HTMLInputElement;
+					console.log("File input changed:", target.files![0]);
+					uploadingFile.value = noSerialize(target.files![0]);
+				}}
+				type="file"
+			/>
+
+			<button
+				onClick$={uploadFile}
+			>
+				upload
+			</button>
 
 			<div class="grid grid-cols-3 gap-4 p-4">
 				{/* TODO: make ts better :broken_heart: */}