Update web/src/components/FileUploadArea.tsx

web/src/components/FileUploadArea.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Button } from './ui/button';
-import { Upload, File, X, FileText, FileSpreadsheet, Presentation } from 'lucide-react';
+import { Upload, File, X, FileText, Presentation, CloudUpload } from 'lucide-react';
 import { Card } from './ui/card';
 import { Badge } from './ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
@@ -12,6 +12,11 @@ interface FileUploadAreaProps {
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
   onFileTypeChange: (index: number, type: FileType) => void;
+
+  // ✅ 新增：真正触发后端上传（App 里实现）
+  onUploadFile?: (index: number) => void;
+  onUploadAll?: () => void;
+
   disabled?: boolean;
 }
 
@@ -25,6 +30,8 @@ export function FileUploadArea({
   onFileUpload,
   onRemoveFile,
   onFileTypeChange,
+  onUploadFile,
+  onUploadAll,
   disabled = false,
 }: FileUploadAreaProps) {
   const [isDragging, setIsDragging] = useState(false);
@@ -51,7 +58,7 @@ export function FileUploadArea({
     );
 
     if (files.length > 0) {
-      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
+      setPendingFiles(files.map((file) => ({ file, type: 'other' as FileType })));
       setShowTypeDialog(true);
     }
   };
@@ -59,21 +66,24 @@ export function FileUploadArea({
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
     if (files.length > 0) {
-      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
+      setPendingFiles(files.map((file) => ({ file, type: 'other' as FileType })));
       setShowTypeDialog(true);
     }
     e.target.value = '';
   };
 
   const handleConfirmUpload = () => {
-    onFileUpload(pendingFiles.map(pf => pf.file));
-    // Update the parent's file types
+    // 这里只“入库”，不触发后端上传（符合你现在的逻辑）
+    onFileUpload(pendingFiles.map((pf) => pf.file));
+
+    // 把用户在弹窗里选的 type 同步到父组件列表（通过 index 偏移）
     const startIndex = uploadedFiles.length;
     pendingFiles.forEach((pf, idx) => {
       setTimeout(() => {
         onFileTypeChange(startIndex + idx, pf.type);
       }, 0);
     });
+
     setPendingFiles([]);
     setShowTypeDialog(false);
   };
@@ -84,15 +94,14 @@ export function FileUploadArea({
   };
 
   const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles(prev => prev.map((pf, i) => 
-      i === index ? { ...pf, type } : pf
-    ));
+    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
   };
 
   const getFileIcon = (filename: string) => {
-    if (filename.endsWith('.pdf')) return FileText;
-    if (filename.endsWith('.docx')) return File;
-    if (filename.endsWith('.pptx')) return Presentation;
+    const lower = filename.toLowerCase();
+    if (lower.endsWith('.pdf')) return FileText;
+    if (lower.endsWith('.docx')) return File;
+    if (lower.endsWith('.pptx')) return Presentation;
     return File;
   };
 
@@ -102,22 +111,33 @@ export function FileUploadArea({
     return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
   };
 
-  const getFileTypeLabel = (type: FileType) => {
-    const labels: Record<FileType, string> = {
-      'syllabus': 'Syllabus',
-      'lecture-slides': 'Lecture Slides / PPT',
-      'literature-review': 'Literature Review / Paper',
-      'other': 'Other Course Document',
-    };
-    return labels[type];
-  };
+  const hasPendingUploads = uploadedFiles.some((f) => !f.uploaded);
 
   return (
     <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>
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm">Course Materials</h4>
+          {uploadedFiles.length > 0 && <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>}
+        </div>
+
+        {/* ✅ Upload All Pending（只在存在 pending 且提供了回调时显示） */}
+        {uploadedFiles.length > 0 && hasPendingUploads && !!onUploadAll && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs gap-2"
+            disabled={disabled}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onUploadAll();
+            }}
+            title="Upload all pending files"
+          >
+            <CloudUpload className="h-4 w-4" />
+            Upload All
+          </Button>
         )}
       </div>
 
@@ -134,12 +154,8 @@ export function FileUploadArea({
         onClick={() => !disabled && fileInputRef.current?.click()}
       >
         <Upload className="h-6 w-6 mx-auto mb-2 text-muted-foreground" />
-        <p className="text-sm text-muted-foreground mb-1">
-          {disabled ? 'Please log in to upload' : 'Drop files or click to upload'}
-        </p>
-        <p className="text-xs text-muted-foreground">
-          .pdf, .docx, .pptx
-        </p>
+        <p className="text-sm text-muted-foreground mb-1">{disabled ? 'Please log in to upload' : 'Drop files or click to upload'}</p>
+        <p className="text-xs text-muted-foreground">.pdf, .docx, .pptx</p>
         <input
           ref={fileInputRef}
           type="file"
@@ -156,19 +172,42 @@ export function FileUploadArea({
         <div className="space-y-3 max-h-64 overflow-y-auto">
           {uploadedFiles.map((uploadedFile, index) => {
             const Icon = getFileIcon(uploadedFile.file.name);
+            const isUploaded = !!uploadedFile.uploaded;
+
             return (
-              <div
-                key={index}
-                className="p-3 bg-muted rounded-md space-y-2"
-              >
+              <div key={index} className="p-3 bg-muted rounded-md space-y-2">
                 <div className="flex items-center gap-2 group">
                   <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                   <div className="flex-1 min-w-0">
                     <p className="text-sm truncate">{uploadedFile.file.name}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {formatFileSize(uploadedFile.file.size)}
-                    </p>
+                    <p className="text-xs text-muted-foreground">{formatFileSize(uploadedFile.file.size)}</p>
                   </div>
+
+                  {/* ✅ 单文件 Upload（仅未上传时显示 & 必须有回调） */}
+                  {!isUploaded && !!onUploadFile && (
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className="h-7 text-xs px-2"
+                      disabled={disabled}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onUploadFile(index);
+                      }}
+                      title="Upload this file to backend"
+                    >
+                      Upload
+                    </Button>
+                  )}
+
+                  {/* ✅ 已上传状态 */}
+                  {isUploaded && (
+                    <Badge variant="secondary" className="text-[10px]">
+                      Uploaded{typeof uploadedFile.uploadedChunks === 'number' ? ` (+${uploadedFile.uploadedChunks})` : ''}
+                    </Badge>
+                  )}
+
                   <Button
                     variant="ghost"
                     size="icon"
@@ -177,16 +216,15 @@ export function FileUploadArea({
                       e.stopPropagation();
                       onRemoveFile(index);
                     }}
+                    title="Remove"
                   >
                     <X className="h-3 w-3" />
                   </Button>
                 </div>
+
                 <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>
@@ -210,31 +248,26 @@ 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">
               {pendingFiles.map((pendingFile, index) => {
                 const Icon = getFileIcon(pendingFile.file.name);
                 return (
-                  <div
-                    key={index}
-                    className="p-3 bg-muted rounded-md space-y-2"
-                  >
+                  <div key={index} className="p-3 bg-muted rounded-md space-y-2">
                     <div className="flex items-center gap-2 group">
                       <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                       <div className="flex-1 min-w-0">
                         <p className="text-sm truncate">{pendingFile.file.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(pendingFile.file.size)}
-                        </p>
+                        <p className="text-xs text-muted-foreground">{formatFileSize(pendingFile.file.size)}</p>
                       </div>
                     </div>
+
                     <div className="space-y-1">
                       <label className="text-xs text-muted-foreground">File Type</label>
-                      <Select 
-                        value={pendingFile.type} 
+                      <Select
+                        value={pendingFile.type}
                         onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
                       >
                         <SelectTrigger className="h-8 text-xs">
@@ -252,22 +285,16 @@ export function FileUploadArea({
                 );
               })}
             </div>
+
             <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={handleCancelUpload}
-              >
+              <Button variant="outline" onClick={handleCancelUpload}>
                 Cancel
               </Button>
-              <Button
-                onClick={handleConfirmUpload}
-              >
-                Upload
-              </Button>
+              <Button onClick={handleConfirmUpload}>Upload</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
     </Card>
   );
-}
+}