Update frontend/hooks/useFileUpload.ts

frontend/hooks/useFileUpload.ts

@@ -1,16 +1,5 @@
-import { useCallback, useMemo, useState } from "react";
-
-/* ================= TYPES ================= */
-
-export interface FileItem {
-  id: string;
-  file: File;
-  path: string;
-  progress: number;
-  status: "idle" | "uploading" | "done" | "error";
-  url?: string;
-  error?: string;
-}
+import { useCallback, useState } from "react";
+import { FileItem, UploadStatus } from "../types";
 
 /* ================= HOOK ================= */
 
@@ -20,18 +9,18 @@ export function useFileUpload() {
 
   /* ---------- ADD FILES ---------- */
   const addFiles = useCallback((input: FileList | File[]) => {
-    const list = Array.from(input).map<FileItem>((file) => ({
+    const list: FileItem[] = Array.from(input).map((file) => ({
       id: crypto.randomUUID(),
       file,
-      path: file.name, // mặc định
+      path: file.name,
       progress: 0,
-      status: "idle",
+      status: UploadStatus.IDLE,
     }));
 
     setFiles((prev) => [...prev, ...list]);
   }, []);
 
-  /* ---------- REMOVE FILE ---------- */
+  /* ---------- REMOVE ---------- */
   const removeFile = useCallback((id: string) => {
     setFiles((prev) => prev.filter((f) => f.id !== id));
   }, []);
@@ -45,13 +34,13 @@ export function useFileUpload() {
     );
   }, []);
 
-  /* ---------- UPLOAD SINGLE ---------- */
-  const uploadOne = useCallback(async (item: FileItem) => {
-    const form = new FormData();
-    form.append("file", item.file);
-    form.append("path", item.path);
-
+  /* ---------- UPLOAD ONE ---------- */
+  const uploadOne = useCallback((item: FileItem) => {
     return new Promise<void>((resolve, reject) => {
+      const form = new FormData();
+      form.append("file", item.file);
+      form.append("path", item.path);
+
       const xhr = new XMLHttpRequest();
       xhr.open("POST", "/api/upload");
 
@@ -62,7 +51,11 @@ export function useFileUpload() {
         setFiles((prev) =>
           prev.map((f) =>
             f.id === item.id
-              ? { ...f, progress: percent, status: "uploading" }
+              ? {
+                  ...f,
+                  progress: percent,
+                  status: UploadStatus.UPLOADING,
+                }
               : f
           )
         );
@@ -77,7 +70,7 @@ export function useFileUpload() {
                 ? {
                     ...f,
                     progress: 100,
-                    status: "done",
+                    status: UploadStatus.DONE,
                     url: res.url,
                   }
                 : f
@@ -85,23 +78,43 @@ export function useFileUpload() {
           );
           resolve();
         } else {
+          setFiles((prev) =>
+            prev.map((f) =>
+              f.id === item.id
+                ? { ...f, status: UploadStatus.ERROR }
+                : f
+            )
+          );
           reject(new Error("Upload failed"));
         }
       };
 
-      xhr.onerror = () => reject(new Error("Network error"));
+      xhr.onerror = () => {
+        setFiles((prev) =>
+          prev.map((f) =>
+            f.id === item.id
+              ? { ...f, status: UploadStatus.ERROR }
+              : f
+          )
+        );
+        reject(new Error("Network error"));
+      };
+
       xhr.send(form);
     });
   }, []);
 
-  /* ---------- START UPLOAD (App.tsx dùng) ---------- */
+  /* ---------- START UPLOAD ---------- */
   const startUpload = useCallback(async () => {
     if (isUploading) return;
     setIsUploading(true);
 
     try {
       for (const f of files) {
-        if (f.status === "idle") {
+        if (
+          f.status === UploadStatus.IDLE ||
+          f.status === UploadStatus.ERROR
+        ) {
           await uploadOne(f);
         }
       }
@@ -110,13 +123,12 @@ export function useFileUpload() {
     }
   }, [files, uploadOne, isUploading]);
 
-  /* ---------- RETURN (KHỚP App.tsx) ---------- */
   return {
-    files,            // ✅ App.tsx dùng
-    isUploading,      // ✅ App.tsx dùng
+    files,
+    isUploading,
     addFiles,
-    removeFile,       // ✅ App.tsx dùng
-    updateFilePath,   // ✅ App.tsx dùng
-    startUpload,      // ✅ App.tsx dùng
+    removeFile,
+    updateFilePath,
+    startUpload,
   };
 }