Update frontend/src/components/ocr/UploadZone.jsx

frontend/src/components/ocr/UploadZone.jsx

@@ -1,11 +1,58 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles } from "lucide-react";
+import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles, AlertCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 
+// Allowed file types
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/tiff",
+  "image/tif"
+];
+
+// Allowed file extensions (for fallback validation)
+const ALLOWED_EXTENSIONS = [".pdf", ".png", ".jpg", ".jpeg", ".tiff", ".tif"];
+
+// Maximum file size: 4 MB
+const MAX_FILE_SIZE = 4 * 1024 * 1024; // 4 MB in bytes
+
 export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFields = "", onKeyFieldsChange = () => {} }) {
   const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState(null);
+
+  const validateFile = (file) => {
+    // Reset error
+    setError(null);
+
+    // Check file type
+    const fileExtension = "." + file.name.split(".").pop().toLowerCase();
+    const isValidType = ALLOWED_TYPES.includes(file.type) || ALLOWED_EXTENSIONS.includes(fileExtension);
+    
+    if (!isValidType) {
+      setError("Only PDF, PNG, JPG, and TIFF files are allowed.");
+      return false;
+    }
+
+    // Check file size
+    if (file.size > MAX_FILE_SIZE) {
+      const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
+      setError(`File size exceeds 4 MB limit. Your file is ${fileSizeMB} MB.`);
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleFileSelect = (file) => {
+    if (validateFile(file)) {
+      setError(null);
+      onFileSelect(file);
+    }
+  };
 
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -20,7 +67,9 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
     e.preventDefault();
     setIsDragging(false);
     const file = e.dataTransfer.files[0];
-    if (file) onFileSelect(file);
+    if (file) {
+      handleFileSelect(file);
+    }
   };
 
   const getFileIcon = (type) => {
@@ -31,6 +80,13 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
 
   const FileIcon = selectedFile ? getFileIcon(selectedFile.type) : FileText;
 
+  // Clear error when file is cleared
+  useEffect(() => {
+    if (!selectedFile) {
+      setError(null);
+    }
+  }, [selectedFile]);
+
   return (
     <div className="w-full">
       <AnimatePresence mode="wait">
@@ -76,7 +132,7 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
                   {isDragging ? "Drop your file here" : "Drop your file here, or browse"}
                 </p>
                 <p className="text-sm text-slate-400">
-                  Supports PDF, PNG, JPG, TIFF, DOCX up to 50MB
+                  Supports PDF, PNG, JPG, TIFF up to 4MB
                 </p>
               </div>
 
@@ -102,8 +158,15 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
               <input
                 type="file"
                 className="hidden"
-                accept=".pdf,.png,.jpg,.jpeg,.tiff,.docx,.xlsx"
-                onChange={(e) => e.target.files[0] && onFileSelect(e.target.files[0])}
+                accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
+                onChange={(e) => {
+                  const file = e.target.files[0];
+                  if (file) {
+                    handleFileSelect(file);
+                  }
+                  // Reset input so same file can be selected again after error
+                  e.target.value = "";
+                }}
               />
             </label>
 
@@ -164,6 +227,25 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
           </motion.div>
         )}
       </AnimatePresence>
+      
+      {/* Error Message */}
+      {error && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          className="mt-3 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2"
+        >
+          <AlertCircle className="h-4 w-4 text-red-600 flex-shrink-0 mt-0.5" />
+          <p className="text-sm text-red-700 flex-1">{error}</p>
+          <button
+            onClick={() => setError(null)}
+            className="text-red-600 hover:text-red-800 transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </motion.div>
+      )}
     </div>
   );
 }