rushlink/assets/js/dragdrop.js
2019-12-16 16:21:41 +05:30

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();
});
});