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

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

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",
+            "/p/{id}",
-            host = env::var("HOST_URL").unwrap_or("<no_host_provided>".to_string()),
             id = id
         ),
 
         false => format!(
-            "https://{host}/{id}\n",
+            "/{id}",
-            host = env::var("HOST_URL").unwrap_or("http://localhost:8000".to_string()),
             id = id
-        ),
+        )
     };
 
-    Ok(url)
+    Ok(Redirect::to(url))
 }
 
 #[derive(FromForm)]

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 {
+html, body {
-            height: 100vh;
+overflow-y:hidden;
-            font-family: monospace;
+}
-            padding: 3rem;
 
-            display: flex;
+body {
-        }
+height: 100vh;
-    
+font-family: monospace;
-    form { flex: 1; }
+padding: 3rem;
 
-    textarea {
+display: flex;
-        height: 90%;
+}
-        width: 100%;
 
-        background: none;
+form { flex: 1; }
-        border: none;
 
-        padding-left: 10px
+textarea {
+height: 90%;
+width: 100%;
 
-        resize: none;
+background: none;
-        overflow: auto;
+border: none;
 
-        color: inherit;
+padding-left: 10px
-        font-family: 'Fira Code', monospace;
-        line-height: inherit;
-    }
 
-    button[type="submit"] {
+resize: none;
-        position: absolute;
+overflow: auto;
-        bottom: 1rem;
-        right: 1rem;
 
-        height: 4rem;
+color: inherit;
-        width: 4rem;
+font-family: 'Fira Code', monospace;
-        border: none;
+line-height: inherit;
-        border-radius: 50%;
+}
-        background: #F29718;
 
-        font-size: 0rem;
+button[type="submit"] {
+position: absolute;
+bottom: 1rem;
+right: 1rem;
 
-        cursor: pointer;
+height: 4rem;
-    }
+width: 4rem;
-   
+border: none;
-   textarea:focus, input:focus{
+border-radius: 50%;
-        outline: none;
+background: #F29718;
-    }
 
-    *:focus {
+font-size: 0rem;
-        outline: none;
-    }
 
+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">
+<form action="/submit" method="post">
-        <textarea name="val" placeholder="
+    <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>
+    <button type="submit" title="Paste">&#x2398</button>
-    </form>
+</form>
 
-    <script>
+<script>
-        const form = document.querySelector('form');
+    const form = document.querySelector('form');
-        const input = document.querySelector('textarea');
+    const input = document.querySelector('textarea');
-        const button = document.querySelector('button[type="submit"]');
+    const button = document.querySelector('button[type="submit"]');
 
-        const onInput = () => button.classList.toggle('hidden', !input.value);
+    async function postData(url = '', data) {
-        input.addEventListener('input', onInput);
+        const response = await fetch(url, {
-        onInput();
+            method: 'POST',
-
+            headers: {
-        document.body.addEventListener('keydown', (e) => {
+                'Content-Type': 'application/x-www-form-urlencoded',
-            if (e.key === 'Enter' && e.ctrlKey) {
+            },
-                form.submit();
+            body: data
-            }
         });
-    </script>
+        return response;
-{% endblock body %}
+    }
+
+    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 %}