Drop Overlay

var container = document.getElementById('drop-container');
var overlay = document.getElementById('drop-overlay-inner');
var counter = 0;

container.addEventListener('dragenter', function(e) {
 e.preventDefault(); counter++;
 overlay.classList.add('visible');
});
container.addEventListener('dragleave', function(e) {
 counter--;
 if (counter <= 0) { counter = 0; overlay.classList.remove('visible'); }
});
container.addEventListener('drop', function() {
 counter = 0; overlay.classList.remove('visible');
});

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

The overlay that appears mid-drag

When fullPageDrop is on, dragging a file anywhere over the page raises an overlay showing where it will land. The overlay is not a separate feature to enable — it is how full-page drop makes itself visible, which is the whole point: a page-wide target with no visible boundary is indistinguishable from a page that ignores drops.

Changing the caption

fullPageDropText defaults to null, in which case the component uses its localised default. Set it to say something specific to the page — “Drop invoices to attach” tells the user what will happen, where “Drop files here” only says that something will.