fix proxy + file upload

src/routes/api/[path]/index.tsx

@@ -4,20 +4,24 @@ const proxy = async ({ send, url, pathname, request }: RequestEvent) => {
   const targetUrl = new URL(`http://localhost:8081${pathname}`, url);
   const headers = new Headers(request.headers);
 
-  const backendResponse = await fetch(targetUrl, {
+  const fetchOptions: RequestInit = {
     method: request.method,
     headers,
-    body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : undefined,
     redirect: 'manual',
-  });
+  };
 
-  console.log(`Proxying ${request.method} request to: ${targetUrl.href}`);
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
+    fetchOptions.body = request.body;
+    (fetchOptions as any).duplex = 'half';
+  }
+
+  const res = await fetch(targetUrl, fetchOptions);
 
   send(
-    new Response(backendResponse.body, {
-      status: backendResponse.status,
-      statusText: backendResponse.statusText,
-      headers: backendResponse.headers,
+    new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: res.headers,
     })
   );
 };

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: */}