From 1f84fd28b9cbdd08ce80bff5c0b76426f6fe8531 Mon Sep 17 00:00:00 2001
From: Gunwant Jain <mail@wantguns.dev>
Date: Sat, 19 Jun 2021 06:42:22 +0530
Subject: [PATCH] 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>
---
 docker-compose.yml        |   3 +-
 src/main.rs               |  12 ++-
 templates/base.html.tera  |   5 +-
 templates/index.html.tera | 181 ++++++++++++++++++++++++--------------
 4 files changed, 126 insertions(+), 75 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 16ed6bd..8934fd6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,8 @@
 version: '3.3'
 services:
   pastebin:
-    image: wantguns/bin
+    build: .
+    # image: wantguns/bin
     container_name: pastebin
     ports:
       - 127.0.0.1:6162:6162
diff --git a/src/main.rs b/src/main.rs
index 2bf734d..a0a74b3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -50,7 +50,7 @@ fn retrieve(id: PasteId) -> Option<File> {
 }
 
 #[post("/", data = "<paste>")]
-fn upload(paste: Data) -> Result<String, std::io::Error> {
+fn upload(paste: Data) -> Result<Redirect, std::io::Error> {
     let id = PasteId::new(4);
 
     let filename = format!("upload/{id}", id = id);
@@ -65,19 +65,17 @@ fn upload(paste: Data) -> Result<String, std::io::Error> {
         .contains("text")
     {
         true => format!(
-            "https://{host}/p/{id}\n",
-            host = env::var("HOST_URL").unwrap_or("<no_host_provided>".to_string()),
+            "/p/{id}",
             id = id
         ),
 
         false => format!(
-            "https://{host}/{id}\n",
-            host = env::var("HOST_URL").unwrap_or("http://localhost:8000".to_string()),
+            "/{id}",
             id = id
-        ),
+        )
     };
 
-    Ok(url)
+    Ok(Redirect::to(url))
 }
 
 #[derive(FromForm)]
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 3882252..f7f9b1e 100644
--- a/templates/base.html.tera
+++ b/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 {
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 7c2a93b..3b52c45 100644
--- a/templates/index.html.tera
+++ b/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 %}
\ No newline at end of file