48 lines
2.0 KiB
JavaScript
48 lines
2.0 KiB
JavaScript
"use strict";
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
// The implementation of this drag-drop logic is largely based on the
|
|
// answer described in <https://stackoverflow.com/a/28226022/5207081>.
|
|
//
|
|
// The gist is this: every time the drag enters a new DOM object, it will
|
|
// fire a new 'dragenter' event on that element. That is a pain, because
|
|
// we do not know which element will be the last to receive a dragleave
|
|
// event, in case the user aborts the process.
|
|
//
|
|
// Therefore, we use an Ugly Hack™. There will be an element with id
|
|
// 'dropZone', which blocks the complete page. When a 'dragenter' event
|
|
// is received on any DOM element, we will unhide this modal page-blocker.
|
|
// This will guarantee us that the next 'enter' event will be received on
|
|
// this page-block element. This event we shall ignore.
|
|
//
|
|
// Then, whenever the user stop their drag action, we will receive the
|
|
// 'dragleave' on the '#dropZone' element. Now we know when exactly
|
|
// a drag action is cancelled (and we will hide the modal element
|
|
// accordingly).
|
|
|
|
let dropZone = document.getElementById("dropZone");
|
|
window.addEventListener("dragenter", (event) => {
|
|
// User starts a drag action
|
|
dropZone.style.visibility = "";
|
|
dropZone.style.opacity = 1;
|
|
});
|
|
|
|
dropZone.addEventListener("drop", (event) => {
|
|
// User drops a file
|
|
event.preventDefault();
|
|
document.getElementById("fileUploadField").files = event.dataTransfer.files;
|
|
document.getElementById("fileUploadForm").submit();
|
|
});
|
|
|
|
dropZone.addEventListener("dragleave", (event) => {
|
|
// User cancels drag action
|
|
dropZone.style.visibility = "hidden";
|
|
dropZone.style.opacity = 0;
|
|
});
|
|
|
|
window.addEventListener("dragover", (event) => {
|
|
// Prevent the browser from opening the file, because of a drop event
|
|
// on the window. (<https://stackoverflow.com/a/6756680/5207081>)
|
|
event.preventDefault();
|
|
});
|
|
}); |