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",
-            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)]

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

@@ -2,75 +2,84 @@
 
 {% block styles %}
 
-        html, body {
-            overflow-y:hidden;
-        }
+html, body {
+overflow-y:hidden;
+}
 
-        body {
-            height: 100vh;
-            font-family: monospace;
-            padding: 3rem;
+body {
+height: 100vh;
+font-family: monospace;
+padding: 3rem;
 
-            display: flex;
-        }
+display: flex;
+}
 
-    form { flex: 1; }
+form { flex: 1; }
 
-    textarea {
-        height: 90%;
-        width: 100%;
+textarea {
+height: 90%;
+width: 100%;
 
-        background: none;
-        border: none;
+background: none;
+border: none;
 
-        padding-left: 10px
+padding-left: 10px
 
-        resize: none;
-        overflow: auto;
+resize: none;
+overflow: auto;
 
-        color: inherit;
-        font-family: 'Fira Code', monospace;
-        line-height: inherit;
-    }
+color: inherit;
+font-family: 'Fira Code', monospace;
+line-height: inherit;
+}
 
-    button[type="submit"] {
-        position: absolute;
-        bottom: 1rem;
-        right: 1rem;
+button[type="submit"] {
+position: absolute;
+bottom: 1rem;
+right: 1rem;
 
-        height: 4rem;
-        width: 4rem;
-        border: none;
-        border-radius: 50%;
-        background: #F29718;
+height: 4rem;
+width: 4rem;
+border: none;
+border-radius: 50%;
+background: #F29718;
 
-        font-size: 0rem;
+font-size: 0rem;
 
-        cursor: pointer;
-    }
+cursor: pointer;
+}
 
-   textarea:focus, input:focus{
-        outline: none;
-    }
+textarea:focus, input:focus {
+outline: none;
+}
 
-    *:focus {
-        outline: none;
-    }
+*:focus {
+outline: none;
+}
 
+button[type="submit"].hidden { display: 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,21 +89,34 @@ 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>
+</form>
 
-    <script>
+<script>
     const form = document.querySelector('form');
     const input = document.querySelector('textarea');
     const button = document.querySelector('button[type="submit"]');
 
+    async function postData(url = '', data) {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: data
+        });
+        return response;
+    }
+
     const onInput = () => button.classList.toggle('hidden', !input.value);
     input.addEventListener('input', onInput);
     onInput();
@@ -104,5 +126,34 @@ open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autoco
             form.submit();
         }
     });
-    </script>
+
+    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 %}