Update web/src/components/FileUploadArea.tsx

web/src/components/FileUploadArea.tsx

@@ -1,10 +1,30 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "./ui/button";
-import { Upload, File as FileIcon, X, FileText, Presentation, Image as ImageIcon } from "lucide-react";
+import {
+  Upload,
+  File as FileIcon,
+  X,
+  FileText,
+  Presentation,
+  Image as ImageIcon,
+} from "lucide-react";
 import { Card } from "./ui/card";
 import { Badge } from "./ui/badge";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import type { UploadedFile, FileType } from "../App";
 
 interface FileUploadAreaProps {
@@ -24,7 +44,6 @@ const ACCEPT_EXTS = [".pdf", ".docx", ".pptx", ".png", ".jpg", ".jpeg", ".webp",
 const ACCEPT_ATTR = ".pdf,.docx,.pptx,.png,.jpg,.jpeg,.webp,.gif";
 
 function isImageFile(file: File) {
-  // Prefer MIME, fallback to ext
   if (file.type?.startsWith("image/")) return true;
   const n = file.name.toLowerCase();
   return [".png", ".jpg", ".jpeg", ".webp", ".gif"].some((ext) => n.endsWith(ext));
@@ -34,8 +53,9 @@ function getFileIcon(filename: string) {
   const lower = filename.toLowerCase();
   if (lower.endsWith(".pdf")) return FileText;
   if (lower.endsWith(".pptx")) return Presentation;
-  if ([".png", ".jpg", ".jpeg", ".webp", ".gif"].some((ext) => lower.endsWith(ext))) return ImageIcon;
   if (lower.endsWith(".docx")) return FileIcon;
+  if ([".png", ".jpg", ".jpeg", ".webp", ".gif"].some((ext) => lower.endsWith(ext)))
+    return ImageIcon;
   return FileIcon;
 }
 
@@ -57,99 +77,88 @@ export function FileUploadArea({
   const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
   const [showTypeDialog, setShowTypeDialog] = useState(false);
 
-  /**
-   * Preview URL cache:
-   * - key: unique fingerprint (name+size+lastModified)
-   * - value: objectURL
-   */
-  const [previewUrls, setPreviewUrls] = useState<Record<string, string>>({});
+  // ===== objectURL cache（更稳：不用 state，避免时序问题）=====
+  const urlCacheRef = useRef<Map<string, string>>(new Map());
 
   const fingerprint = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
 
-  // Maintain preview URLs for uploadedFiles + pendingFiles
-  useEffect(() => {
-    const nextNeeded = new Set<string>();
-
-    const allFiles: File[] = [
+  const allFiles = useMemo(() => {
+    return [
       ...uploadedFiles.map((u) => u.file),
       ...pendingFiles.map((p) => p.file),
     ];
+  }, [uploadedFiles, pendingFiles]);
 
+  // 维护 cache：只保留当前需要的 image url；移除的立即 revoke
+  useEffect(() => {
+    const need = new Set<string>();
     for (const f of allFiles) {
       if (!isImageFile(f)) continue;
-      nextNeeded.add(fingerprint(f));
+      need.add(fingerprint(f));
     }
 
-    setPreviewUrls((prev) => {
-      const next = { ...prev };
-
-      // create missing
-      for (const f of allFiles) {
-        if (!isImageFile(f)) continue;
-        const key = fingerprint(f);
-        if (!next[key]) {
-          next[key] = URL.createObjectURL(f);
+    // revoke removed
+    for (const [key, url] of urlCacheRef.current.entries()) {
+      if (!need.has(key)) {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+          // ignore
         }
+        urlCacheRef.current.delete(key);
       }
+    }
 
-      // revoke removed
-      for (const key of Object.keys(next)) {
-        if (!nextNeeded.has(key)) {
-          try {
-            URL.revokeObjectURL(next[key]);
-          } catch {
-            // ignore
-          }
-          delete next[key];
-        }
+    // create missing
+    for (const f of allFiles) {
+      if (!isImageFile(f)) continue;
+      const key = fingerprint(f);
+      if (!urlCacheRef.current.has(key)) {
+        urlCacheRef.current.set(key, URL.createObjectURL(f));
       }
+    }
+  }, [allFiles]);
 
-      return next;
-    });
-
-    return () => {
-      // no-op here; we revoke on key removal & unmount below
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadedFiles, pendingFiles]);
-
-  // Revoke all on unmount
+  // unmount：全部 revoke
   useEffect(() => {
     return () => {
-      try {
-        Object.values(previewUrls).forEach((url) => URL.revokeObjectURL(url));
-      } catch {
-        // ignore
+      for (const url of urlCacheRef.current.values()) {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+          // ignore
+        }
       }
+      urlCacheRef.current.clear();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (!disabled) setIsDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setIsDragging(false);
+  const getPreviewUrl = (file: File) => {
+    const key = fingerprint(file);
+    return urlCacheRef.current.get(key);
   };
 
   const filterSupportedFiles = (files: File[]) => {
     return files.filter((file) => {
-      const lower = file.name.toLowerCase();
-      // allow images by mime too
       if (isImageFile(file)) return true;
+      const lower = file.name.toLowerCase();
       return [".pdf", ".docx", ".pptx"].some((ext) => lower.endsWith(ext));
     });
   };
 
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+
+  const handleDragLeave = () => setIsDragging(false);
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(false);
     if (disabled) return;
 
     const files = filterSupportedFiles(Array.from(e.dataTransfer.files));
-
     if (files.length > 0) {
       setPendingFiles(files.map((file) => ({ file, type: "other" as FileType })));
       setShowTypeDialog(true);
@@ -167,13 +176,14 @@ export function FileUploadArea({
 
   const handleConfirmUpload = () => {
     onFileUpload(pendingFiles.map((pf) => pf.file));
-    // Update the parent's file types
+
     const startIndex = uploadedFiles.length;
     pendingFiles.forEach((pf, idx) => {
       setTimeout(() => {
         onFileTypeChange(startIndex + idx, pf.type);
       }, 0);
     });
+
     setPendingFiles([]);
     setShowTypeDialog(false);
   };
@@ -189,8 +199,7 @@ export function FileUploadArea({
 
   const renderLeading = (file: File) => {
     if (isImageFile(file)) {
-      const key = fingerprint(file);
-      const src = previewUrls[key];
+      const src = getPreviewUrl(file);
       return (
         <div className="h-12 w-12 rounded-md overflow-hidden bg-background border border-border flex-shrink-0">
           {src ? (
@@ -217,7 +226,9 @@ export function FileUploadArea({
     <Card className="p-4 space-y-3">
       <div className="flex items-center justify-between">
         <h4 className="text-sm">Course Materials</h4>
-        {uploadedFiles.length > 0 && <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>}
+        {uploadedFiles.length > 0 && (
+          <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>
+        )}
       </div>
 
       {/* Upload Area */}
@@ -225,11 +236,11 @@ export function FileUploadArea({
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
-        className={`
-          border-2 border-dashed rounded-lg p-4 text-center transition-colors
-          ${isDragging ? "border-primary bg-accent" : "border-border"}
-          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-        `}
+        className={[
+          "border-2 border-dashed rounded-lg p-4 text-center transition-colors",
+          isDragging ? "border-primary bg-accent" : "border-border",
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        ].join(" ")}
         onClick={() => !disabled && fileInputRef.current?.click()}
       >
         <Upload className="h-6 w-6 mx-auto mb-2 text-muted-foreground" />
@@ -237,6 +248,7 @@ export function FileUploadArea({
           {disabled ? "Please log in to upload" : "Drop files or click to upload"}
         </p>
         <p className="text-xs text-muted-foreground">{ACCEPT_EXTS.join(", ")}</p>
+
         <input
           ref={fileInputRef}
           type="file"
@@ -279,7 +291,10 @@ export function FileUploadArea({
 
                 <div className="space-y-1">
                   <label className="text-xs text-muted-foreground">File Type</label>
-                  <Select value={uploadedFile.type} onValueChange={(value) => onFileTypeChange(index, value as FileType)}>
+                  <Select
+                    value={uploadedFile.type}
+                    onValueChange={(value) => onFileTypeChange(index, value as FileType)}
+                  >
                     <SelectTrigger className="h-8 text-xs">
                       <SelectValue />
                     </SelectTrigger>
@@ -303,7 +318,9 @@ export function FileUploadArea({
           <DialogContent className="sm:max-w-[425px]">
             <DialogHeader>
               <DialogTitle>Select File Types</DialogTitle>
-              <DialogDescription>Please select the type for each file you are uploading.</DialogDescription>
+              <DialogDescription>
+                Please select the type for each file you are uploading.
+              </DialogDescription>
             </DialogHeader>
 
             <div className="space-y-3 max-h-64 overflow-y-auto">