Implement drag'n'drop support

2 files changed, 56 insertions, 0 deletions

diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..1f88d95
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,52 @@
+"use strict";
+
+(function () {
+        const dropZone = document.body;
+        if (!dropZone) {
+                return;
+        }
+
+        const hoverClassName = "hover";
+
+        // Handle drag* events to handle style
+        // Add the css you want when the class "hover" is present
+        dropZone.addEventListener("dragenter", function (e) {
+                e.preventDefault();
+                dropZone.classList.add(hoverClassName);
+        });
+
+        dropZone.addEventListener("dragover", function (e) {
+                e.preventDefault();
+                dropZone.classList.add(hoverClassName);
+        });
+
+        dropZone.addEventListener("dragleave", function (e) {
+                e.preventDefault();
+                dropZone.classList.remove(hoverClassName);
+        });
+
+        // This is the most important event, the event that gives access to files
+        dropZone.addEventListener("drop", function (e) {
+                e.preventDefault();
+                dropZone.classList.remove(hoverClassName);
+
+                const files = Array.from(e.dataTransfer.files);
+                if (files.length > 0) {
+                        const data = new FormData();
+                        for (const file of files) {
+                                data.append('file', file);
+                        }
+
+                        fetch('/', {
+                                method: 'POST',
+                                body: data,
+                        })
+                                .then(response => response.text())
+                                .then(body => {  // Yes, this is ugly
+                                        document.open()
+                                        document.write(body)
+                                        document.close()
+                                })
+                }
+        });
+})();
diff --git a/static/style.css b/static/style.css
index 0d78cbd..3f1a5da 100644
--- a/static/style.css
+++ b/static/style.css
@@ -57,3 +57,7 @@ details[open] > summary:before {
 .fakelink:hover {
         text-decoration: underline;
 }
+
+.hover {
+        background-color: #f1f1f1;
+}