From 3e10267caf2878c5d9072c30c6118c246a7f091f Mon Sep 17 00:00:00 2001
From: Gunwant Jain <mail@wantguns.dev>
Date: Sun, 26 Dec 2021 09:45:53 +0530
Subject: [PATCH] Add visual cue for uploading files Unfortunately, since fetch
 API does not support getting progress while perfoming uploads, we cannot have
 a more dynamic cue

Signed-off-by: Gunwant Jain <mail@wantguns.dev>
---
 static/css/index.css      | 17 ++++++++++++++++-
 static/js/index.js        | 15 +++++++++++----
 templates/base.html.tera  |  2 +-
 templates/index.html.tera |  1 +
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 45aa997..ac97176 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -24,7 +24,7 @@ form.highlight {
 }
 
 textarea {
-    height: 90%;
+    height: 100%;
     width: 100%;
 
     background: none;
@@ -63,6 +63,21 @@ button[type="submit"] {
     cursor: pointer;
 }
 
+#upload_card {
+    display: none;
+}
+
+#upload_card.show {
+    height: 90%;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 40px;
+}
+
 *:focus {
     outline: none;
 }
diff --git a/static/js/index.js b/static/js/index.js
index f796c8d..62d6553 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,6 +1,7 @@
 const body = document.querySelector('body');
 const form = document.querySelector('form');
 const grid_form = document.querySelector('.grid_form');
+const upload_card = document.querySelector('#upload_card');
 const textarea = document.querySelector('textarea');
 const select = document.querySelector('select');
 const submitButton = document.querySelector('button[type="submit"]');
@@ -48,7 +49,7 @@ function preventDefaults(e) {
 });
 
 // unhighlight the dragarea
-['dragleave', 'drop'].forEach(eventName => {
+['dragleave'].forEach(eventName => {
     form.addEventListener(eventName, unhighlight, false);
 });
 
@@ -66,18 +67,24 @@ function unhighlight(e) {
 function dropHandler(ev) {
     ev.preventDefault();
 
+    // Give a visual cue
+    upload_card.classList.add('show');
+    grid_form.classList.add('hidden');
+
     if (ev.dataTransfer.items) {
         var item = ev.dataTransfer.items[0];
         var blob = item.getAsFile();
         const ext = blob.name.split(".")[1];
         var url = window.location.href;
 
-        // Give a visual cue
-        grid_form.classList.add('hidden');
-
         postData(url, blob)
             .then(data => {
                 window.location.href = data + "." + ext;
+
+                // remove the jazz for if user returns to the prev page
+                upload_card.classList.remove('show');
+                grid_form.classList.remove('hidden');
+                form.classList.remove('highlight');
             })
             .catch(function (err) {
                 console.info(err + " url: " + url);
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 0dc86c4..e9204f5 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -20,7 +20,7 @@
       body {
           /* Change background color to that of your theme's */
           background: #0f1419;
-          border: 10px solid transparent;
+          padding: 10px;
           color: #E6E1CF;
       }
 
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 82c7826..2925a6d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -110,6 +110,7 @@ AUTHOR
 
         <button type="submit" title="Paste">Paste</button>
     </div>
+    <div id="upload_card"><h5>Uploading...</h5></div>
 </form>
 
 <script src="/js/index.js"></script>