From 32f241140011803cc6933e0e5e5e5850b77a019d Mon Sep 17 00:00:00 2001 From: jvoisin Date: Sat, 23 Feb 2019 13:07:41 +0100 Subject: [PATCH] Implement drag'n'drop support --- static/script.js | 52 +++++++++++++++++++++++++++++++++++++++++++++ static/style.css | 4 ++++ templates/base.html | 1 + 3 files changed, 57 insertions(+) create mode 100644 static/script.js 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; +} diff --git a/templates/base.html b/templates/base.html index 3f6e97b..572e0dc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -7,6 +7,7 @@ +