Full Page Drop

A full-page drop target that shows an overlay when files are dragged anywhere on the page. The overlay disappears when the drag ends.

Drop files anywhere on the page

var overlay = document.getElementById('fullpage-overlay');
var dragCounter = 0;

document.addEventListener('dragenter', function(e) {
 e.preventDefault();
 dragCounter++;
 overlay.classList.add('active');
});
document.addEventListener('dragleave', function(e) {
 dragCounter--;
 if (dragCounter <= 0) { dragCounter = 0; overlay.classList.remove('active'); }
});
document.addEventListener('dragover', function(e) { e.preventDefault(); });
document.addEventListener('drop', function(e) {
 e.preventDefault();
 dragCounter = 0;
 overlay.classList.remove('active');
 if (e.dataTransfer.files.length) uploader.addFiles(e.dataTransfer.files);
});

var uploader = new MultipleUpload(document.getElementById('demo-fullpage-drop'), {
 uploadUrl: '/api/upload',
 multiple: true
});