Update web/src/components/FileUploadArea.tsx

web/src/components/FileUploadArea.tsx

@@ -1,11 +1,11 @@
-import React, { useRef, useState } from 'react';
-import { Button } from './ui/button';
-import { Upload, File, X, FileText, FileSpreadsheet, Presentation } 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 type { UploadedFile, FileType } from '../App';
+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 { 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 type { UploadedFile, FileType } from "../App";
 
 interface FileUploadAreaProps {
   uploadedFiles: UploadedFile[];
@@ -20,6 +20,31 @@ interface PendingFile {
   type: FileType;
 }
 
+const ACCEPT_EXTS = [".pdf", ".docx", ".pptx", ".png", ".jpg", ".jpeg", ".webp", ".gif"];
+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));
+}
+
+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;
+  return FileIcon;
+}
+
+function formatFileSize(bytes: number) {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
 export function FileUploadArea({
   uploadedFiles,
   onFileUpload,
@@ -32,6 +57,74 @@ 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>>({});
+
+  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[] = [
+      ...uploadedFiles.map((u) => u.file),
+      ...pendingFiles.map((p) => p.file),
+    ];
+
+    for (const f of allFiles) {
+      if (!isImageFile(f)) continue;
+      nextNeeded.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 of Object.keys(next)) {
+        if (!nextNeeded.has(key)) {
+          try {
+            URL.revokeObjectURL(next[key]);
+          } catch {
+            // ignore
+          }
+          delete next[key];
+        }
+      }
+
+      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
+  useEffect(() => {
+    return () => {
+      try {
+        Object.values(previewUrls).forEach((url) => URL.revokeObjectURL(url));
+      } catch {
+        // ignore
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     if (!disabled) setIsDragging(true);
@@ -41,32 +134,39 @@ export function FileUploadArea({
     setIsDragging(false);
   };
 
+  const filterSupportedFiles = (files: File[]) => {
+    return files.filter((file) => {
+      const lower = file.name.toLowerCase();
+      // allow images by mime too
+      if (isImageFile(file)) return true;
+      return [".pdf", ".docx", ".pptx"].some((ext) => lower.endsWith(ext));
+    });
+  };
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(false);
     if (disabled) return;
 
-    const files = Array.from(e.dataTransfer.files).filter((file) =>
-      ['.pdf', '.docx', '.pptx'].some((ext) => file.name.toLowerCase().endsWith(ext))
-    );
+    const files = filterSupportedFiles(Array.from(e.dataTransfer.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);
     }
   };
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
+    const files = filterSupportedFiles(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 = '';
+    e.target.value = "";
   };
 
   const handleConfirmUpload = () => {
-    onFileUpload(pendingFiles.map(pf => pf.file));
+    onFileUpload(pendingFiles.map((pf) => pf.file));
     // Update the parent's file types
     const startIndex = uploadedFiles.length;
     pendingFiles.forEach((pf, idx) => {
@@ -84,41 +184,40 @@ 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;
-    return File;
-  };
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-  };
+  const renderLeading = (file: File) => {
+    if (isImageFile(file)) {
+      const key = fingerprint(file);
+      const src = previewUrls[key];
+      return (
+        <div className="h-12 w-12 rounded-md overflow-hidden bg-background border border-border flex-shrink-0">
+          {src ? (
+            <img
+              src={src}
+              alt={file.name}
+              className="h-full w-full object-cover"
+              draggable={false}
+            />
+          ) : (
+            <div className="h-full w-full flex items-center justify-center text-muted-foreground">
+              <ImageIcon className="h-5 w-5" />
+            </div>
+          )}
+        </div>
+      );
+    }
 
-  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 Icon = getFileIcon(file.name);
+    return <Icon className="h-5 w-5 text-muted-foreground flex-shrink-0" />;
   };
 
   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>
-        )}
+        {uploadedFiles.length > 0 && <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>}
       </div>
 
       {/* Upload Area */}
@@ -128,23 +227,21 @@ export function FileUploadArea({
         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'}
+          ${isDragging ? "border-primary bg-accent" : "border-border"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
         `}
         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
+          {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"
           multiple
-          accept=".pdf,.docx,.pptx"
+          accept={ACCEPT_ATTR}
           onChange={handleFileSelect}
           className="hidden"
           disabled={disabled}
@@ -155,20 +252,17 @@ export function FileUploadArea({
       {uploadedFiles.length > 0 && (
         <div className="space-y-3 max-h-64 overflow-y-auto">
           {uploadedFiles.map((uploadedFile, index) => {
-            const Icon = getFileIcon(uploadedFile.file.name);
+            const f = uploadedFile.file;
             return (
-              <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 key={index} className="p-3 bg-muted rounded-md space-y-2">
+                <div className="flex items-center gap-3 group">
+                  {renderLeading(f)}
+
                   <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-sm truncate">{f.name}</p>
+                    <p className="text-xs text-muted-foreground">{formatFileSize(f.size)}</p>
                   </div>
+
                   <Button
                     variant="ghost"
                     size="icon"
@@ -177,16 +271,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 +303,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);
+                const f = pendingFile.file;
                 return (
-                  <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 key={index} className="p-3 bg-muted rounded-md space-y-2">
+                    <div className="flex items-center gap-3">
+                      {renderLeading(f)}
                       <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-sm truncate">{f.name}</p>
+                        <p className="text-xs text-muted-foreground">{formatFileSize(f.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 +340,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>
   );
-}
+}