Spaces:
Sleeping
Sleeping
Update frontend/hooks/useFileUpload.ts
Browse files
frontend/hooks/useFileUpload.ts
CHANGED
|
@@ -1,40 +1,25 @@
|
|
| 1 |
import { useCallback, useState } from "react";
|
| 2 |
import { FileItem, UploadStatus } from "../types";
|
| 3 |
|
| 4 |
-
/* ================= HOOK ================= */
|
| 5 |
-
|
| 6 |
export function useFileUpload() {
|
| 7 |
const [files, setFiles] = useState<FileItem[]>([]);
|
| 8 |
const [isUploading, setIsUploading] = useState(false);
|
| 9 |
|
| 10 |
-
|
| 11 |
-
const addFiles = useCallback((
|
| 12 |
-
|
| 13 |
-
id: crypto.randomUUID(),
|
| 14 |
-
file,
|
| 15 |
-
path: file.name,
|
| 16 |
-
progress: 0,
|
| 17 |
-
status: UploadStatus.IDLE,
|
| 18 |
-
}));
|
| 19 |
-
|
| 20 |
-
setFiles((prev) => [...prev, ...list]);
|
| 21 |
}, []);
|
| 22 |
|
| 23 |
-
/* ---------- REMOVE ---------- */
|
| 24 |
const removeFile = useCallback((id: string) => {
|
| 25 |
setFiles((prev) => prev.filter((f) => f.id !== id));
|
| 26 |
}, []);
|
| 27 |
|
| 28 |
-
/* ---------- UPDATE PATH ---------- */
|
| 29 |
const updateFilePath = useCallback((id: string, path: string) => {
|
| 30 |
setFiles((prev) =>
|
| 31 |
-
prev.map((f) =>
|
| 32 |
-
f.id === id ? { ...f, path } : f
|
| 33 |
-
)
|
| 34 |
);
|
| 35 |
}, []);
|
| 36 |
|
| 37 |
-
/* ---------- UPLOAD ONE ---------- */
|
| 38 |
const uploadOne = useCallback((item: FileItem) => {
|
| 39 |
return new Promise<void>((resolve, reject) => {
|
| 40 |
const form = new FormData();
|
|
@@ -70,7 +55,7 @@ export function useFileUpload() {
|
|
| 70 |
? {
|
| 71 |
...f,
|
| 72 |
progress: 100,
|
| 73 |
-
status: UploadStatus.
|
| 74 |
url: res.url,
|
| 75 |
}
|
| 76 |
: f
|
|
@@ -104,7 +89,6 @@ export function useFileUpload() {
|
|
| 104 |
});
|
| 105 |
}, []);
|
| 106 |
|
| 107 |
-
/* ---------- START UPLOAD ---------- */
|
| 108 |
const startUpload = useCallback(async () => {
|
| 109 |
if (isUploading) return;
|
| 110 |
setIsUploading(true);
|
|
|
|
| 1 |
import { useCallback, useState } from "react";
|
| 2 |
import { FileItem, UploadStatus } from "../types";
|
| 3 |
|
|
|
|
|
|
|
| 4 |
export function useFileUpload() {
|
| 5 |
const [files, setFiles] = useState<FileItem[]>([]);
|
| 6 |
const [isUploading, setIsUploading] = useState(false);
|
| 7 |
|
| 8 |
+
// ✅ App.tsx + FileUploader truyền FileItem[]
|
| 9 |
+
const addFiles = useCallback((items: FileItem[]) => {
|
| 10 |
+
setFiles((prev) => [...prev, ...items]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
}, []);
|
| 12 |
|
|
|
|
| 13 |
const removeFile = useCallback((id: string) => {
|
| 14 |
setFiles((prev) => prev.filter((f) => f.id !== id));
|
| 15 |
}, []);
|
| 16 |
|
|
|
|
| 17 |
const updateFilePath = useCallback((id: string, path: string) => {
|
| 18 |
setFiles((prev) =>
|
| 19 |
+
prev.map((f) => (f.id === id ? { ...f, path } : f))
|
|
|
|
|
|
|
| 20 |
);
|
| 21 |
}, []);
|
| 22 |
|
|
|
|
| 23 |
const uploadOne = useCallback((item: FileItem) => {
|
| 24 |
return new Promise<void>((resolve, reject) => {
|
| 25 |
const form = new FormData();
|
|
|
|
| 55 |
? {
|
| 56 |
...f,
|
| 57 |
progress: 100,
|
| 58 |
+
status: UploadStatus.SUCCESS,
|
| 59 |
url: res.url,
|
| 60 |
}
|
| 61 |
: f
|
|
|
|
| 89 |
});
|
| 90 |
}, []);
|
| 91 |
|
|
|
|
| 92 |
const startUpload = useCallback(async () => {
|
| 93 |
if (isUploading) return;
|
| 94 |
setIsUploading(true);
|