Fixed upload page style

src/app/images/upload/page.css

@@ -1,6 +1,6 @@
 .page {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -9,4 +9,45 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+}
+
+.info {
+    opacity: 50%;
+    margin-bottom: 10px;
+}
+
+.file-upload{
+    /* width: 60vw;
+    height: 50vh; */
+    text-wrap: nowrap;
+    padding: 30vh 30vw;
+    margin: 20px;
+    border-radius: 1rem;
+    outline-style: dashed;
+    cursor: pointer;
+    font-size: larger;
+}
+
+.fadeonhover {
+    transition: all;
+    transition-duration: 500ms;
+}
+
+.fadeonhover:hover {
+    opacity: 50%;
+}
+
+.popuponhover {
+    transition: all;
+    transition-duration: 500ms;
+}
+
+.popuponhover:hover {
+    transform: scale(110%);
+}
+
+.filename {
+    text-align: center;
+    opacity: 50%;
+    font-size: smaller;
 }

src/app/images/upload/page.tsx

@@ -3,7 +3,7 @@ import "@radix-ui/themes/styles.css";
 import {useState} from "react";
 import './page.css'
 import {getCookie} from "@/app/helpers";
-import {Button, Theme} from "@radix-ui/themes";
+import {Button, Heading, Theme} from "@radix-ui/themes";
 
 
 export default function Page() {
@@ -14,9 +14,23 @@ export default function Page() {
 
     //@ts-expect-error the thing breaks idfk
     const handleFileChange = (e) => {
+        console.log(e.target.files[0].name)
         setFile(e.target.files[0]);
     };
 
+    const dropFile = (e: DragEvent) => {
+        e.preventDefault();
+        const files = e.dataTransfer?.files ?? []
+        if(files.length > 0)
+            //@ts-expect-error the thing breaks idfk
+            setFile(files[0])
+    }
+
+    function dragOverHandler(ev: DragEvent) {
+        ev.preventDefault();
+    }
+      
+
     const handleUpload = async () => {
         if (!file) {
             setMessage('Please select a file first.');
@@ -56,19 +70,25 @@ export default function Page() {
     };
 
     return (
-        <Theme appearance="dark">
+        //@ts-expect-error the thing breaks idfk
+        <Theme appearance="dark" onDrop={dropFile} onDragOver={dragOverHandler}>
             <div className="mainpage">
                 <div className="page">
-                    <h2>Upload a File</h2>
+                    <Heading color="crimson" as="h2">Upload a File</Heading>
                 </div>
                 <div className="page">
-
-                    <input type="file" onChange={handleFileChange}/>
-                    <Button color="crimson" variant="surface" onClick={handleUpload} style={{marginLeft: '10px'}}>
+                    <label htmlFor="file-upload" className="file-upload fadeonhover">
+                        Drag files here
+                        {/*@ts-expect-error ts is sucking ):*/}
+                        <p className="filename">{file != null ? file.name : ''}</p>
+                    </label>
+                    <input id="file-upload" type="file" style={{display: "none"}} onChange={handleFileChange}/>
+                    <div className="page info">{message && <p>{message}</p>}</div>
+                    <Button color="crimson" variant="surface" onClick={handleUpload} style={{marginLeft: '10px'}} className="popuponhover">
+                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z" fill="currentColor"></path></svg>
                         Upload
                     </Button>
                 </div>
-                <div className="page">{message && <p>{message}</p>}</div>
             </div>
         </Theme>
     );