From a1146209ad587bc1af93b2b643d63d41444b9029 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Mon, 28 Aug 2023 14:14:49 +1000
Subject: Completed initial version of upload page

---
 Pages/Gallery.razor    |  5 -----
 Pages/Upload.razor     | 44 ++++++++++++++++++++++++++++++++++++++++----
 Pages/Upload.razor.css | 20 +++++++++++---------
 3 files changed, 51 insertions(+), 18 deletions(-)

(limited to 'Pages')

diff --git a/Pages/Gallery.razor b/Pages/Gallery.razor
index 41125fc..eea051c 100644
--- a/Pages/Gallery.razor
+++ b/Pages/Gallery.razor
@@ -9,11 +9,6 @@
 
 <link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
 
-<form id="upload" action="/media" method="post" enctype="multipart/form-data">
-    <input type="file" id="myFile" name="filename" multiple/>
-    <input type="submit" />
-</form>
-
 @foreach(var media in Media) {
     <a href="/ViewMedia?m=@(media.Guid)">
         <img src="/media/thumb/@(media.Guid)?h=200" />
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>
diff --git a/Pages/Upload.razor.css b/Pages/Upload.razor.css
index 76891de..6ff40a2 100644
--- a/Pages/Upload.razor.css
+++ b/Pages/Upload.razor.css
@@ -1,6 +1,7 @@
 div#dropzone {
     border-radius: 10px;
     border:        3px dashed #aaa;
+    cursor:        pointer;
     height:        400px;
     left:          50%;
     position:      relative;
@@ -11,23 +12,24 @@
 }
 
 div#dropzone p {
-    color:     #aaa;
-    display:   inline-block;
-    left:      50%;
-    margin:    0;
-    position:  relative;
-    top:       50%;
-    transform: translate(-50%, -50%);
+    color:      #aaa;
+    display:    inline-block;
+    left:       50%;
+    margin:     0;
+    position:   relative;
+    text-align: center;
+    top:        50%;
+    transform:  translate(-50%, -50%);
 }
 
 div#dropzone input {
     display: none;
 }
 
-div#dropzone:hover {
+div#dropzone.hover, div#dropzone:hover {
     border: 3px dashed white;
 }
 
-div#dropzone:hover p {
+div#dropzone.hover p, div#dropzone:hover p {
     color: white;
 }
\ No newline at end of file
-- 
cgit v1.3