Update frontend/hooks/useFileUpload.ts

frontend/hooks/useFileUpload.ts

@@ -1,11 +1,12 @@
-import { useState, useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 /* ================= TYPES ================= */
 
-export interface UploadItem {
+export interface FileItem {
   id: string;
   file: File;
-  progress: number; // 0 → 100
+  path: string;
+  progress: number;
   status: "idle" | "uploading" | "done" | "error";
   url?: string;
   error?: string;
@@ -14,111 +15,108 @@ export interface UploadItem {
 /* ================= HOOK ================= */
 
 export function useFileUpload() {
-  const [uploads, setUploads] = useState<UploadItem[]>([]);
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
 
-  /* ---------- ADD FILE ---------- */
-  const addFiles = useCallback((files: FileList | File[]) => {
-    const list = Array.from(files).map((file) => ({
+  /* ---------- ADD FILES ---------- */
+  const addFiles = useCallback((input: FileList | File[]) => {
+    const list = Array.from(input).map<FileItem>((file) => ({
       id: crypto.randomUUID(),
       file,
+      path: file.name, // mặc định
       progress: 0,
-      status: "idle" as const,
+      status: "idle",
     }));
 
-    setUploads((prev) => [...prev, ...list]);
+    setFiles((prev) => [...prev, ...list]);
   }, []);
 
-  /* ---------- UPLOAD SINGLE FILE ---------- */
-  const uploadFile = useCallback(async (item: UploadItem) => {
-    const form = new FormData();
-    form.append("file", item.file);
+  /* ---------- REMOVE FILE ---------- */
+  const removeFile = useCallback((id: string) => {
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
 
-    setUploads((prev) =>
-      prev.map((u) =>
-        u.id === item.id
-          ? { ...u, status: "uploading", progress: 0 }
-          : u
+  /* ---------- UPDATE PATH ---------- */
+  const updateFilePath = useCallback((id: string, path: string) => {
+    setFiles((prev) =>
+      prev.map((f) =>
+        f.id === id ? { ...f, path } : f
       )
     );
+  }, []);
 
-    try {
+  /* ---------- UPLOAD SINGLE ---------- */
+  const uploadOne = useCallback(async (item: FileItem) => {
+    const form = new FormData();
+    form.append("file", item.file);
+    form.append("path", item.path);
+
+    return new Promise<void>((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.open("POST", "/api/upload");
 
       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
+
+        setFiles((prev) =>
+          prev.map((f) =>
+            f.id === item.id
+              ? { ...f, progress: percent, status: "uploading" }
+              : f
           )
         );
       };
 
-      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);
-      });
-
-      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
-        )
-      );
-    }
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const res = JSON.parse(xhr.responseText);
+          setFiles((prev) =>
+            prev.map((f) =>
+              f.id === item.id
+                ? {
+                    ...f,
+                    progress: 100,
+                    status: "done",
+                    url: res.url,
+                  }
+                : f
+            )
+          );
+          resolve();
+        } else {
+          reject(new Error("Upload failed"));
+        }
+      };
+
+      xhr.onerror = () => reject(new Error("Network error"));
+      xhr.send(form);
+    });
   }, []);
 
-  /* ---------- UPLOAD ALL ---------- */
-  const uploadAll = useCallback(async () => {
-    for (const item of uploads) {
-      if (item.status === "idle") {
-        await uploadFile(item);
+  /* ---------- START UPLOAD (App.tsx dùng) ---------- */
+  const startUpload = useCallback(async () => {
+    if (isUploading) return;
+    setIsUploading(true);
+
+    try {
+      for (const f of files) {
+        if (f.status === "idle") {
+          await uploadOne(f);
+        }
       }
+    } finally {
+      setIsUploading(false);
     }
-  }, [uploads, uploadFile]);
-
-  /* ---------- REMOVE FILE ---------- */
-  const remove = useCallback((id: string) => {
-    setUploads((prev) => prev.filter((u) => u.id !== id));
-  }, []);
-
-  /* ---------- RESET ---------- */
-  const reset = useCallback(() => {
-    setUploads([]);
-  }, []);
+  }, [files, uploadOne, isUploading]);
 
+  /* ---------- RETURN (KHỚP App.tsx) ---------- */
   return {
-    uploads,
+    files,            // ✅ App.tsx dùng
+    isUploading,      // ✅ App.tsx dùng
     addFiles,
-    uploadFile,
-    uploadAll,
-    remove,
-    reset,
+    removeFile,       // ✅ App.tsx dùng
+    updateFilePath,   // ✅ App.tsx dùng
+    startUpload,      // ✅ App.tsx dùng
   };
-}
+}