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

@@ -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;
 }

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);

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;
       }
 

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>