3 files changed, 83 insertions, 9 deletions

diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index d0b5687..a0d23e7 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -46,6 +46,35 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const [loading, setLoading] = React.useState<boolean>(false);
 
+  const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const _handle_file_click = () => {
+        fileInputRef.current?.click();
+  }
+
+  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(true);
+  }
+
+  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(false);
+  }
+
+  const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(true);
+
+        console.log(e.dataTransfer.files);
+
+        _handle_file_change(e.dataTransfer.files, host);
+  }
+
   const _handle_dropdowns = (dropdown: number) => {
     setDropdown1Vis(false);
     setDropdown2Vis(false);
@@ -72,17 +101,18 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     setLoading(false);
   };
 
-  const _handle_file_change = async (e: React.ChangeEvent<HTMLInputElement>, host: boolean) => {
-    if (e.target.files) {
+  const _handle_file_change = async (files: FileList | null, host: boolean) => {
+  console.log(files);
+    if (files) {
       if (host) {
         setUploadRunContent({
           ...uploadRunContent,
-          host_demo: e.target.files[0],
+          host_demo: files[0],
         });
       } else {
         setUploadRunContent({
           ...uploadRunContent,
-          partner_demo: e.target.files[0],
+          partner_demo: files[0],
         });
       }
     }
@@ -178,13 +208,26 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         </div>
                       </div>
                       <span>Host Demo</span>
-                      <input type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e, true)} />
+                                          <div onClick={_handle_file_click} onDragOver={(e) => {_handle_drag_over(e)}} onDrop={(e) => {_handle_drop(e, true)}} onDragLeave={(e) => {_handle_drag_leave(e)}} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
+                        <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
+                                                {!uploadRunContent.host_demo ? 
+                                                <div>
+                                                <span>Drag and drop</span>
+                                                <div>
+                                                        <span>Or click here</span>
+                                                        <button>Upload</button>
+                                                </div>
+                                                </div>
+                                                : null}
+
+                                                <span>{uploadRunContent.host_demo?.name}</span>
+                                          </div>
                       {
                         games[selectedGameID].is_coop &&
                         (
                           <>
                             <span>Partner Demo</span>
-                            <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e, false)} />
+                            <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />
                           </>
                         )
                       }
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index f2b7ed0..c783d2a 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -115,3 +115,33 @@ button:hover {
     width: 100%;
 }
 
+#host_demo {
+        background-color: rgba(0, 0, 0, 0);
+        display: none;
+}
+
+.upload-run-drag-area {
+        border: 2px dashed grey;
+        border-radius: 10px;
+        height: 200px;
+        cursor: pointer;
+        width: 300px;
+        transition: all 0.2s ease;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+}
+
+.upload-run-drag-area-highlight {
+        border: 2px dashed white;
+}
+
+.upload-run-drag-area-hidden {
+        height: fit-content;
+        text-align: left;
+        border: none;
+        align-items: flex-start;
+}
+
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 6b458eb..602cf65 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -3,6 +3,7 @@ import MessageDialog from "../components/MessageDialog";
 
 const useMessage = () => {
     const [isOpen, setIsOpen] = useState(false);
+
     const [title, setTitle] = useState<string>("");
     const [subtitle, setSubtitle] = useState<string>("");
     const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
@@ -11,9 +12,9 @@ const useMessage = () => {
         setIsOpen(true);
         setTitle(title);
         setSubtitle(subtitle);
-        return new Promise<void>((resolve) => {
-            setResolvePromise(() => resolve);
-        })
+                return new Promise((resolve) => {
+                        setResolvePromise(() => resolve);
+                });
     };
 
     const handleClose = () => {