From 8ccc708532f6c4b5f8bf126659c0e30bc9b831b8 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Wed, 2 Oct 2024 10:30:03 +0200
Subject: [PATCH] highlight upload box when dragging

---
 interface/src/components/upload/DragNdrop.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/interface/src/components/upload/DragNdrop.tsx b/interface/src/components/upload/DragNdrop.tsx
index d9d06c585..44902417d 100644
--- a/interface/src/components/upload/DragNdrop.tsx
+++ b/interface/src/components/upload/DragNdrop.tsx
@@ -12,6 +12,7 @@ import './dragNdrop.css';
 
 const DragNdrop = ({ onFileSelected }) => {
   const [file, setFile] = useState<File>();
+  const [dragged, setDragged] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const { LL } = useI18nContext();
 
@@ -45,6 +46,7 @@ const DragNdrop = ({ onFileSelected }) => {
   const handleRemoveFile = (event) => {
     event.stopPropagation();
     setFile(undefined);
+    setDragged(false);
   };
 
   const handleUploadClick = (event) => {
@@ -56,11 +58,17 @@ const DragNdrop = ({ onFileSelected }) => {
     inputRef.current?.click();
   };
 
+  const handleDragOver = (event) => {
+    event.preventDefault(); // prevent file from being opened
+    setDragged(true);
+  };
+
   return (
     <div
-      className={`document-uploader ${file ? 'upload-box active' : 'upload-box'}`}
+      className={`document-uploader ${file || dragged ? 'active' : ''}`}
       onDrop={handleDrop}
-      onDragOver={(event) => event.preventDefault()}
+      onDragOver={handleDragOver}
+      onDragLeave={() => setDragged(false)}
       onClick={handleBrowseClick}
     >
       <div className="upload-info">