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

@@ -57,20 +57,29 @@
 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="
+    <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,12 +89,14 @@ 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>
@@ -95,6 +106,17 @@ open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autoco
     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();
         }
     });
+
+    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 %}