implement drag and drop

As a consquence of better UX, '/' post handler will now redirect instead
of returning a String.

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

templates/base.html.tera

@@ -6,7 +6,7 @@
     <meta
       name="Description"
       content="Author: Gunwant Jain,
-    A highly opinionated, minamalistic Pastebin without the bloat of a database."
+    A highly opinionated and minamalistic Pastebin."
     />
     <title>{{ title }}</title>
 
@@ -26,7 +26,8 @@
           background: #191f26;
           padding: 20px 50px;
           margin: 0px;
-          color: #5c6773;
+          color: #E6E1CF;
+          /* color: #5c6773; */
       }
 
       ::selection {

templates/index.html.tera

@@ -1,76 +1,85 @@
 {% extends "base" %}
 
 {% block styles %}
-    
-        html, body {
-            overflow-y:hidden;
-        }
 
-        body {
-            height: 100vh;
-            font-family: monospace;
-            padding: 3rem;
+html, body {
+overflow-y:hidden;
+}
 
-            display: flex;
-        }
-    
-    form { flex: 1; }
+body {
+height: 100vh;
+font-family: monospace;
+padding: 3rem;
 
-    textarea {
-        height: 90%;
-        width: 100%;
+display: flex;
+}
 
-        background: none;
-        border: none;
+form { flex: 1; }
 
-        padding-left: 10px
+textarea {
+height: 90%;
+width: 100%;
 
-        resize: none;
-        overflow: auto;
+background: none;
+border: none;
 
-        color: inherit;
-        font-family: 'Fira Code', monospace;
-        line-height: inherit;
-    }
+padding-left: 10px
 
-    button[type="submit"] {
-        position: absolute;
-        bottom: 1rem;
-        right: 1rem;
+resize: none;
+overflow: auto;
 
-        height: 4rem;
-        width: 4rem;
-        border: none;
-        border-radius: 50%;
-        background: #F29718;
+color: inherit;
+font-family: 'Fira Code', monospace;
+line-height: inherit;
+}
 
-        font-size: 0rem;
+button[type="submit"] {
+position: absolute;
+bottom: 1rem;
+right: 1rem;
 
-        cursor: pointer;
-    }
-   
-   textarea:focus, input:focus{
-        outline: none;
-    }
+height: 4rem;
+width: 4rem;
+border: none;
+border-radius: 50%;
+background: #F29718;
 
-    *:focus {
-        outline: none;
-    }
+font-size: 0rem;
 
+cursor: pointer;
+}
 
-    button[type="submit"].hidden { display: none; }
+textarea:focus, input:focus {
+outline: none;
+}
+
+*:focus {
+outline: none;
+}
+
+button[type="submit"].hidden { display: none; }
+
+#drop_zone {
+border: 1px dashed grey;
+width: 100%;
+height: 100%;
+}
 {% endblock styles %}
 
 {% block body %}
-    <form action="/submit" method="post">
-        <textarea name="val" placeholder="
+<form action="/submit" method="post">
+    <textarea style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
 
                                     ========
 
 WEB USAGE
 ---------
 
-    Press the big yellow button to paste. 
+    Drag a file and drop it here.
+
+    or
+
+    After typing, press the big yellow button to paste. 
 
     or 
 
@@ -80,29 +89,71 @@ WEB USAGE
 CLI USAGE
 ---------
 
-    curl --data-binary @file.txt https://bin.wantguns.dev
+    curl -Ls -o /dev/null -w %{url_effective} --data-binary @file.txt https://bin.wantguns.dev
 
+    Better use-cases of CLI mentioned at Github.
 
                                     ========
 
-open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
+        spellcheck="false"></textarea>
 
-        <button type="submit" title="Paste">&#x2398</button>
-    </form>
+    <button type="submit" title="Paste">&#x2398</button>
+</form>
 
-    <script>
-        const form = document.querySelector('form');
-        const input = document.querySelector('textarea');
-        const button = document.querySelector('button[type="submit"]');
+<script>
+    const form = document.querySelector('form');
+    const input = document.querySelector('textarea');
+    const button = document.querySelector('button[type="submit"]');
 
-        const onInput = () => button.classList.toggle('hidden', !input.value);
-        input.addEventListener('input', onInput);
-        onInput();
-
-        document.body.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && e.ctrlKey) {
-                form.submit();
-            }
+    async function postData(url = '', data) {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: data
         });
-    </script>
-{% endblock body %}
+        return response;
+    }
+
+    const onInput = () => button.classList.toggle('hidden', !input.value);
+    input.addEventListener('input', onInput);
+    onInput();
+
+    document.body.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && e.ctrlKey) {
+            form.submit();
+        }
+    });
+
+    function dropHandler(ev) {
+        console.log('File(s) dropped');
+
+        ev.preventDefault();
+
+        if (ev.dataTransfer.items) {
+            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+                if (ev.dataTransfer.items[i].kind === 'file') {
+                    var file = ev.dataTransfer.items[i].getAsFile();
+                    console.log('... file[' + i + '].name = ' + file.name);
+
+                    var url = window.location.href;
+
+                    postData(url, file)
+                        .then(data => {
+                            window.location.href = data.url;
+                        })
+                        .catch(function (err) {
+                            console.info(err + " url: " + url);
+                        });
+                }
+            }
+        } else {
+            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+                console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+            }
+        }
+    }
+</script>
+{% endblock body %}