Update frontend/hooks/useFileUpload.ts

frontend/hooks/useFileUpload.ts

@@ -1,72 +1,124 @@
-import { useState, useCallback } from 'react';
-import { FileItem, UploadStatus } from '../types';
-import { uploadFileToHub } from '../services/hfService';
+import { useState, useCallback } from "react";
 
-export const useFileUpload = () => {
-  // Local Upload State
-  const [files, setFiles] = useState<FileItem[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
+/* ================= TYPES ================= */
 
-  // --- UPLOAD LOGIC ---
+export interface UploadItem {
+  id: string;
+  file: File;
+  progress: number; // 0 → 100
+  status: "idle" | "uploading" | "done" | "error";
+  url?: string;
+  error?: string;
+}
 
-  const addFiles = useCallback((newFilesList: FileItem[]) => {
-    setFiles((prev) => [...prev, ...newFilesList]);
-  }, []);
+/* ================= HOOK ================= */
 
-  const removeFile = useCallback((id: string) => {
-    setFiles((prev) => prev.filter((f) => f.id !== id));
-  }, []);
+export function useFileUpload() {
+  const [uploads, setUploads] = useState<UploadItem[]>([]);
+
+  /* ---------- ADD FILE ---------- */
+  const addFiles = useCallback((files: FileList | File[]) => {
+    const list = Array.from(files).map((file) => ({
+      id: crypto.randomUUID(),
+      file,
+      progress: 0,
+      status: "idle" as const,
+    }));
 
-  const updateFilePath = useCallback((id: string, newPath: string) => {
-    setFiles((prev) => prev.map((f) => (f.id === id ? { ...f, path: newPath } : f)));
+    setUploads((prev) => [...prev, ...list]);
   }, []);
 
-  const startUpload = useCallback(async () => {
-    const filesToUpload = files.filter(
-      (f) => f.status === UploadStatus.IDLE || f.status === UploadStatus.ERROR
+  /* ---------- UPLOAD SINGLE FILE ---------- */
+  const uploadFile = useCallback(async (item: UploadItem) => {
+    const form = new FormData();
+    form.append("file", item.file);
+
+    setUploads((prev) =>
+      prev.map((u) =>
+        u.id === item.id
+          ? { ...u, status: "uploading", progress: 0 }
+          : u
+      )
     );
 
-    if (filesToUpload.length === 0) return;
+    try {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", "/api/upload");
 
-    setIsUploading(true);
+      xhr.upload.onprogress = (e) => {
+        if (!e.lengthComputable) return;
+        const percent = Math.round((e.loaded / e.total) * 100);
+        setUploads((prev) =>
+          prev.map((u) =>
+            u.id === item.id ? { ...u, progress: percent } : u
+          )
+        );
+      };
+
+      const result: any = await new Promise((resolve, reject) => {
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve(JSON.parse(xhr.responseText));
+          } else {
+            reject(new Error("Upload failed"));
+          }
+        };
+        xhr.onerror = () => reject(new Error("Network error"));
+        xhr.send(form);
+      });
 
-    const uploadPromises = filesToUpload.map(async (item) => {
-      setFiles((prev) =>
-        prev.map((f) =>
-          f.id === item.id ? { ...f, status: UploadStatus.UPLOADING, error: undefined } : f
+      setUploads((prev) =>
+        prev.map((u) =>
+          u.id === item.id
+            ? {
+                ...u,
+                status: "done",
+                progress: 100,
+                url: result.url,
+              }
+            : u
         )
       );
+    } catch (err: any) {
+      setUploads((prev) =>
+        prev.map((u) =>
+          u.id === item.id
+            ? {
+                ...u,
+                status: "error",
+                error: err.message || "Upload error",
+              }
+            : u
+        )
+      );
+    }
+  }, []);
 
-      try {
-        const url = await uploadFileToHub({
-            file: item.file,
-            path: item.path
-        });
-
-        setFiles((prev) =>
-          prev.map((f) =>
-            f.id === item.id ? { ...f, status: UploadStatus.SUCCESS, url } : f
-          )
-        );
-      } catch (err: any) {
-        setFiles((prev) =>
-          prev.map((f) =>
-            f.id === item.id ? { ...f, status: UploadStatus.ERROR, error: err.message } : f
-          )
-        );
+  /* ---------- UPLOAD ALL ---------- */
+  const uploadAll = useCallback(async () => {
+    for (const item of uploads) {
+      if (item.status === "idle") {
+        await uploadFile(item);
       }
-    });
+    }
+  }, [uploads, uploadFile]);
+
+  /* ---------- REMOVE FILE ---------- */
+  const remove = useCallback((id: string) => {
+    setUploads((prev) => prev.filter((u) => u.id !== id));
+  }, []);
 
-    await Promise.allSettled(uploadPromises);
-    setIsUploading(false);
-  }, [files]);
+  /* ---------- RESET ---------- */
+  const reset = useCallback(() => {
+    setUploads([]);
+  }, []);
 
   return {
-    files,
-    isUploading,
+    uploads,
     addFiles,
-    removeFile,
-    updateFilePath,
-    startUpload
+    uploadFile,
+    uploadAll,
+    remove,
+    reset,
   };
-};
+}