fix(upload file): drag and drop file

src/app/App.tsx

@@ -1,9 +1,23 @@
+import { useEffect } from "react";
 import { ThemeProvider } from "next-themes";
 import { RouterProvider } from "react-router";
 import { router } from "./routes";
 import { Toaster } from "./components/ui/sonner";
 
 export default function App() {
+  // Safety net: without this, a file dropped just outside a dropzone
+  // (whitespace, a child element) falls through to the browser's
+  // default behavior, which opens/downloads the file instead of no-op.
+  useEffect(() => {
+    const preventDefault = (e: DragEvent) => e.preventDefault();
+    window.addEventListener("dragover", preventDefault);
+    window.addEventListener("drop", preventDefault);
+    return () => {
+      window.removeEventListener("dragover", preventDefault);
+      window.removeEventListener("drop", preventDefault);
+    };
+  }, []);
+
   return (
     <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
       <RouterProvider router={router} />

src/app/components/KnowledgeManagement.tsx

@@ -103,6 +103,7 @@ export default function KnowledgeManagement({
   const [docsError, setDocsError] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
   const [processing, setProcessing] = useState<string | null>(null);
   const [deleting, setDeleting] = useState<string | null>(null);
 
@@ -227,8 +228,7 @@ export default function KnowledgeManagement({
     }
   };
 
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
+  const uploadFiles = async (files: FileList) => {
     if (!files || files.length === 0) return;
     const userId = getUserId();
     if (!userId) return;
@@ -251,9 +251,25 @@ export default function KnowledgeManagement({
     }
 
     setUploading(false);
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    await uploadFiles(files);
     e.target.value = "";
   };
 
+  const handleFileDrop = async (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (uploading) return;
+    const files = e.dataTransfer.files;
+    if (!files || files.length === 0) return;
+    await uploadFiles(files);
+  };
+
   const processDocumentById = async (userId: string, docId: string) => {
     setProcessing(docId);
     setDocuments((prev) =>
@@ -584,7 +600,26 @@ export default function KnowledgeManagement({
               {/* Upload zone */}
               <label
                 htmlFor="file-upload"
-                className="group flex flex-col items-center gap-2.5 border-2 border-dashed border-slate-200 rounded-xl p-7 cursor-pointer hover:border-[#FF8F00] hover:bg-orange-50/30 transition-colors"
+                onDragEnter={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (!uploading) setIsDragging(true);
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onDragLeave={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setIsDragging(false);
+                }}
+                onDrop={handleFileDrop}
+                className={`group flex flex-col items-center gap-2.5 border-2 border-dashed rounded-xl p-7 cursor-pointer transition-colors ${
+                  isDragging
+                    ? "border-[#FF8F00] bg-orange-50/50"
+                    : "border-slate-200 hover:border-[#FF8F00] hover:bg-orange-50/30"
+                }`}
               >
                 <div className="w-10 h-10 rounded-xl bg-slate-100 group-hover:bg-orange-100 flex items-center justify-center transition-colors">
                   {uploading ? (
@@ -597,6 +632,8 @@ export default function KnowledgeManagement({
                   <p className="text-sm font-medium text-slate-700">
                     {uploading
                       ? "Uploading..."
+                      : isDragging
+                      ? "Drop to upload"
                       : <>Drop files, or <span className="text-[#FF8F00]">browse</span></>
                     }
                   </p>