Update hooks/useFileUpload.ts

hooks/useFileUpload.ts

@@ -1,12 +1,16 @@
+
 import { useState, useCallback } from 'react';
 import { FileItem, UploadStatus } from '../types';
-import { uploadFileToHub } from '../services/hfService';
+import { uploadBatchToHub } from '../services/hfService';
 
 export const useFileUpload = () => {
-  // Local Upload State
   const [files, setFiles] = useState<FileItem[]>([]);
   const [isUploading, setIsUploading] = useState(false);
 
+  // --- CONFIGURATION ---
+  const BATCH_SIZE = 5; // Files per request
+  const CONCURRENCY_LIMIT = 3; // Parallel requests
+
   // --- UPLOAD LOGIC ---
 
   const addFiles = useCallback((newFilesList: FileItem[]) => {
@@ -30,34 +34,63 @@ export const useFileUpload = () => {
 
     setIsUploading(true);
 
-    const uploadPromises = filesToUpload.map(async (item) => {
+    // 1. Create Batches (Chunks)
+    const batches = [];
+    for (let i = 0; i < filesToUpload.length; i += BATCH_SIZE) {
+      batches.push(filesToUpload.slice(i, i + BATCH_SIZE));
+    }
+
+    // 2. Process Batch Function
+    const processBatch = async (batch: FileItem[]) => {
+      // Set status UPLOADING for this batch
       setFiles((prev) =>
         prev.map((f) =>
-          f.id === item.id ? { ...f, status: UploadStatus.UPLOADING, error: undefined } : f
+          batch.find((b) => b.id === f.id) 
+            ? { ...f, status: UploadStatus.UPLOADING, error: undefined } 
+            : f
         )
       );
 
       try {
-        const url = await uploadFileToHub({
+        // Prepare payload for service
+        const batchPayload = batch.map(item => ({
+            id: item.id,
             file: item.file,
             path: item.path
-        });
+        }));
+
+        // Call API
+        const urls = await uploadBatchToHub(batchPayload);
 
+        // Success: Update status and add URLs
         setFiles((prev) =>
-          prev.map((f) =>
-            f.id === item.id ? { ...f, status: UploadStatus.SUCCESS, url } : f
-          )
+          prev.map((f) => {
+            const index = batch.findIndex(b => b.id === f.id);
+            if (index !== -1) {
+                return { ...f, status: UploadStatus.SUCCESS, url: urls[index] };
+            }
+            return f;
+          })
         );
       } catch (err: any) {
+        // Error: Update status for whole batch
         setFiles((prev) =>
           prev.map((f) =>
-            f.id === item.id ? { ...f, status: UploadStatus.ERROR, error: err.message } : f
+            batch.find((b) => b.id === f.id) 
+                ? { ...f, status: UploadStatus.ERROR, error: err.message } 
+                : f
           )
         );
       }
-    });
+    };
+
+    // 3. Execute with Concurrency Limit
+    // We process batches in groups of CONCURRENCY_LIMIT
+    for (let i = 0; i < batches.length; i += CONCURRENCY_LIMIT) {
+        const activeBatches = batches.slice(i, i + CONCURRENCY_LIMIT);
+        await Promise.allSettled(activeBatches.map(batch => processBatch(batch)));
+    }
 
-    await Promise.allSettled(uploadPromises);
     setIsUploading(false);
   }, [files]);
 
@@ -69,4 +102,4 @@ export const useFileUpload = () => {
     updateFilePath,
     startUpload
   };
-};
+};