Full Page Drop

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

The whole document as a target

fullPageDrop makes any drop on the page count, and shows an overlay while a drag is in progress. It suits a screen whose main job is receiving files, where asking the user to aim at a specific rectangle is friction for no benefit.

When it is the wrong choice

On a page where dropping means different things in different places — a file manager with folders, an editor where position matters — a page-wide target destroys that information. Use dropTarget to nominate specific elements instead.