Merge pull request #783 from estyemma/feat

[FEAT] Implement Upload Page with XHR Progress

Author: Emmzyemms

.vscode/settings.json

@@ -1,2 +1,3 @@
 {
+    "typescript.autoClosingTags": false
 }

app/api/upload/route.ts

@@ -44,10 +44,11 @@ import { scanFile, VirusScanError, getScanConfig } from "@/app/lib/virusScan";
 import { checkCsrf } from "@/app/lib/csrf";
 import { jobStore } from "@/app/api/jobs/shared/jobStore";
 import { dispatchJob } from "@/app/lib/aiBackend";
-import { MAX_UPLOAD_SIZE_BYTES } from "@/app/lib/constants";
+import { MAX_UPLOAD_SIZE_BYTES, MAX_FILES_PER_REQUEST } from "@/app/lib/constants";
+import { applyRateLimit } from "@/app/lib/serverRateLimit";
 import { logger } from "@/app/lib/logger";
 
-export { MAX_UPLOAD_SIZE_BYTES };
+export { MAX_UPLOAD_SIZE_BYTES, MAX_FILES_PER_REQUEST };
 const ALLOWED_TYPES = ["video/mp4", "video/quicktime", "video/x-msvideo", "video/x-matroska"];
 const ALLOWED_EXTENSIONS = [".mp4", ".mov", ".avi", ".mkv"];
 

app/hooks/useUploadProgress.ts

@@ -1,69 +1,69 @@
 /**
- * useUploadProgress — Issue #529
+ * useUploadProgress
  *
- * Custom hook that uploads files via XMLHttpRequest so that
- * onprogress events are available for per-file progress bars.
- * Returns progress state, upload function, and a cancel function.
+ * XHR-based multi-file upload hook with:
+ * - Per-file progress bars (0–100 %)
+ * - Concurrency cap (default 3 simultaneous uploads)
+ * - Per-file cancel via cancelFile(name)
+ * - Cancel-all via cancelAll()
  */
 
+"use client";
+
 import { useState, useCallback, useRef } from "react";
+import { UPLOAD_CONCURRENCY } from "@/app/lib/constants";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
 
-/** Tracking container object representing progress metrics for individual files */
+/** Per-file progress state */
 export type FileProgress = {
-  /** 0–100 completion percentage indicator */
+  /** Upload completion percentage 0–100 */
   percent: number;
-  /** State machine status string tracking execution phases */
+  /** Lifecycle status of this file's upload */
   status: "idle" | "uploading" | "done" | "error" | "cancelled";
-  /** Optional failure details populating on errors */
+  /** Human-readable error message when status === "error" */
   error?: string;
 };
 
-/** Metadata payload mapping information returned on successful ingest */
+/** Metadata returned on a successful upload */
 export type UploadResult = {
-  /** The server-side async tracking ID associated with processing the artifact */
+  /** Server-assigned job ID for tracking processing status */
   jobId: string;
-  /** The baseline name string matching the origin payload */
+  /** Original filename */
   name: string;
-  /** The remote asset destination access endpoint URL */
+  /** Remote URL of the stored file */
   url: string;
 };
 
-/**
- * Custom hook handling safe parallel multi-file file streaming contexts using underlying XHR event channels.
- *
- * @returns State properties, status maps, and asynchronous invocation tools for batch execution and manual abort overrides.
- */
-export function useUploadProgress() {
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+export function useUploadProgress(concurrency = UPLOAD_CONCURRENCY) {
   const [progresses, setProgresses] = useState<Record<string, FileProgress>>({});
   const [results, setResults] = useState<UploadResult[]>([]);
   const [isUploading, setIsUploading] = useState(false);
 
-  // Keep a ref to all active XHRs so we can abort them
-  const xhrRefs = useRef<XMLHttpRequest[]>([]);
+  // Map from file name → active XHR (so individual files can be cancelled)
+  const xhrMap = useRef<Map<string, XMLHttpRequest>>(new Map());
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
 
-  /**
-   * Dispatches micro-mutations matching granular progress shifts per file index.
-   */
   const setFileProgress = useCallback(
-    (fileName: string, update: Partial<FileProgress>) => {
+    (name: string, update: Partial<FileProgress>) => {
       setProgresses((prev) => ({
         ...prev,
-        [fileName]: { ...prev[fileName], ...update },
+        [name]: { ...prev[name], ...update },
       }));
     },
-    []
+    [],
   );
 
-  /**
-   * Handles low-level XHR transport initialization, header bundling, and streaming callbacks for an explicit payload.
-   * * @param file - The distinct binary file target instance requested for transmission.
-   * @returns Resolves to a structural report object containing tracking metadata upon ingest completion.
-   */
+  // ── Single-file upload ─────────────────────────────────────────────────────
+
   const uploadFile = useCallback(
     (file: File): Promise<UploadResult> => {
       return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhrRefs.current.push(xhr);
+        xhrMap.current.set(file.name, xhr);
 
         const formData = new FormData();
         formData.append("files", file);
@@ -78,83 +78,122 @@ export function useUploadProgress() {
         };
 
         xhr.onload = () => {
+          xhrMap.current.delete(file.name);
+
           if (xhr.status >= 200 && xhr.status < 300) {
             try {
               const data = JSON.parse(xhr.responseText);
+              // API wraps in { data: { jobId, files: [...] }, error: null }
+              const payload = data.data ?? data;
+              const jobId: string =
+                payload.jobId ?? payload.files?.[0]?.jobId ?? "";
+              const url: string = payload.files?.[0]?.url ?? "";
+
               setFileProgress(file.name, { percent: 100, status: "done" });
-              resolve({
-                jobId: data.jobId ?? data.files?.[0]?.jobId ?? "",
-                name: file.name,
-                url: data.files?.[0]?.url ?? "",
-              });
+              resolve({ jobId, name: file.name, url });
             } catch {
-              setFileProgress(file.name, { status: "error", error: "Invalid server response" });
-              reject(new Error("Invalid server response"));
+              const msg = "Invalid server response";
+              setFileProgress(file.name, { status: "error", error: msg });
+              reject(new Error(msg));
             }
           } else {
-            const msg = `Upload failed (HTTP ${xhr.status})`;
+            let msg = `Upload failed (HTTP ${xhr.status})`;
+            try {
+              const body = JSON.parse(xhr.responseText);
+              if (body?.error) msg = body.error;
+              else if (body?.data?.error) msg = body.data.error;
+            } catch { /* ignore parse error */ }
             setFileProgress(file.name, { status: "error", error: msg });
             reject(new Error(msg));
           }
         };
 
         xhr.onerror = () => {
+          xhrMap.current.delete(file.name);
           const msg = "Network error during upload";
           setFileProgress(file.name, { status: "error", error: msg });
           reject(new Error(msg));
         };
 
         xhr.onabort = () => {
+          xhrMap.current.delete(file.name);
           setFileProgress(file.name, { status: "cancelled" });
           reject(new DOMException("Upload cancelled", "AbortError"));
         };
 
+        setFileProgress(file.name, { percent: 0, status: "uploading" });
         xhr.send(formData);
       });
     },
-    [setFileProgress]
+    [setFileProgress],
   );
 
+  // ── Concurrency-limited queue ──────────────────────────────────────────────
+
   /**
-   * Orchestrates parallel batch processing pipelines across variable file array configurations.
-   * * @param files - List of File targets slated for transit dispatching.
-   * @returns Structured collection summarizing successfully loaded files and their active job associations.
+   * Upload `files` with at most `concurrency` simultaneous XHRs.
+   * Returns the list of successful UploadResults.
    */
   const upload = useCallback(
-    async (files: File[]) => {
-      if (files.length === 0) return;
+    async (files: File[]): Promise<UploadResult[]> => {
+      if (files.length === 0) return [];
 
       // Reset state
-      xhrRefs.current = [];
+      xhrMap.current = new Map();
       const initProgress: Record<string, FileProgress> = {};
-      files.forEach((f) => (initProgress[f.name] = { percent: 0, status: "idle" }));
+      files.forEach((f) => {
+        initProgress[f.name] = { percent: 0, status: "idle" };
+      });
       setProgresses(initProgress);
       setResults([]);
       setIsUploading(true);
 
+      const successful: UploadResult[] = [];
+
       try {
-        const uploadResults = await Promise.allSettled(files.map(uploadFile));
-        const successful: UploadResult[] = [];
-        uploadResults.forEach((r) => {
-          if (r.status === "fulfilled") successful.push(r.value);
-        });
+        // Run the queue with a fixed concurrency slot pool
+        let index = 0;
+
+        const worker = async () => {
+          while (index < files.length) {
+            const current = files[index++];
+            const result = await uploadFile(current).catch(() => null);
+            if (result) successful.push(result);
+          }
+        };
+
+        const cap = Math.min(concurrency, files.length);
+        await Promise.all(Array.from({ length: cap }, worker));
+
         setResults(successful);
         return successful;
       } finally {
         setIsUploading(false);
-        xhrRefs.current = [];
+        xhrMap.current.clear();
       }
     },
-    [uploadFile]
+    [uploadFile, concurrency],
   );
 
-  /**
-   * Iterates through active XHR connections to force instant abort events.
-   */
+  // ── Cancel helpers ─────────────────────────────────────────────────────────
+
+  /** Abort a single in-flight upload by filename */
+  const cancelFile = useCallback((name: string) => {
+    const xhr = xhrMap.current.get(name);
+    if (xhr) {
+      xhr.abort();
+      xhrMap.current.delete(name);
+    } else {
+      // File may be queued but not yet uploading — mark cancelled proactively
+      setFileProgress(name, { status: "cancelled" });
+    }
+  }, [setFileProgress]);
+
+  /** Abort all in-flight uploads */
   const cancelAll = useCallback(() => {
-    xhrRefs.current.forEach((xhr) => xhr.abort());
-    xhrRefs.current = [];
+    xhrMap.current.forEach((xhr) => xhr.abort());
+    xhrMap.current.clear();
   }, []);
 
-  return { progresses, results, isUploading, upload, cancelAll };
+  return { progresses, results, isUploading, upload, cancelFile, cancelAll };
 }

app/lib/constants.ts

@@ -1,5 +1,7 @@
 // Upload limits
 export const MAX_UPLOAD_SIZE_BYTES = 500 * 1024 * 1024;
+export const MAX_FILES_PER_REQUEST = 10;
+export const UPLOAD_CONCURRENCY = 3;
 
 // Crypto
 export const PBKDF2_ITERATIONS = 100000;