From 903f51a93d1c0c67efc96ebe850bb80775044512 Mon Sep 17 00:00:00 2001
From: Subrat Kumar Pattanaik <37294184+su-brat@users.noreply.github.com>
Date: Wed, 11 Dec 2024 21:09:59 +0530
Subject: [PATCH] feat: add drag drop support to upload

---
 src/components/UploadPage.jsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/UploadPage.jsx b/src/components/UploadPage.jsx
index 1da63ab..2cc867e 100644
--- a/src/components/UploadPage.jsx
+++ b/src/components/UploadPage.jsx
@@ -1,10 +1,26 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import API from "../helpers/api";
 
 function UploadPage() {
   const [fileObject, setFileObject] = useState(null);
 
+  useEffect(() => {
+    const dropZone = document.getElementById("dropzone");
+    const uploadInput = document.getElementById("fileinput");
+
+    dropZone.addEventListener("dragover", (event) => {
+      event.preventDefault(); // Prevent default browser behavior
+    });
+
+    dropZone.addEventListener("drop", (event) => {
+      event.preventDefault();
+      const files = event.dataTransfer.files;
+      setFileObject(files[0]);
+      uploadInput.files = files;
+    });
+  }, []);
+
   const handleFileChange = (event) => {
     const file = event.target.files[0];
     if (file && file.type === "text/plain") {
@@ -24,12 +40,17 @@ function UploadPage() {
   };
 
   return (
-    <div className="upload-container">
+    <div className="upload-container" id="dropzone">
       <div className="upload-header">Update knowledge</div>
       <div className="upload-body">
         <div className="upload-input">
           <p className="upload-instructions">Please upload a .txt file</p>
-          <input type="file" accept=".txt" onChange={handleFileChange} />
+          <input
+            id="fileinput"
+            type="file"
+            accept=".txt"
+            onChange={handleFileChange}
+          />
         </div>
         <div>
           <button