Completed initial version of upload page

1 files changed, 40 insertions, 4 deletions

diff --git a/Pages/Upload.razor b/Pages/Upload.razor
index a9a1667..d6f63ff 100644
--- a/Pages/Upload.razor
+++ b/Pages/Upload.razor
@@ -3,8 +3,44 @@
 <link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
 
 <div id="dropzone">
-    <p>Drag a file to upload it</p>
-    <form id="upload" action="/media" method="post" enctype="multipart/form-data">
-        <input type="file" id="myFile" name="filename" accept="image/*,video/*"/>
+    <p>Drag a file to upload it<br/>or click to select one or more file(s)</p>
+    <form id="uploadForm" action="/media" method="post" enctype="multipart/form-data">
+        <input type="file" id="fileUpload" name="fileUpload" accept="image/*,video/*" multiple/>
     </form>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+    var dropzone   = document.getElementById('dropzone');
+    var uploadForm = document.getElementById('uploadForm');
+    var fileUpload = document.getElementById('fileUpload');
+
+    dropzone.ondragover = function (e) {
+        e.preventDefault();
+    }
+
+    dropzone.ondragenter = function(e) {
+        e.preventDefault();
+        dropzone.classList.toggle('hover', true);
+    }
+
+    dropzone.ondragleave = function(e) {
+        e.preventDefault();
+        dropzone.classList.toggle('hover', false);
+    }
+
+    dropzone.ondrop = function(e) {
+        e.preventDefault();
+        fileUpload.files = e.dataTransfer.files;
+        console.log('lmao');
+        uploadForm.submit();
+    }
+
+    dropzone.onclick = function(e) {
+        fileUpload.click();
+    }
+
+    fileUpload.onchange = function(e) {
+        console.log('epic');
+        uploadForm.submit();
+    }
+</script>