Drop Overlay

An overlay that appears when a user drags files over the upload container area, providing visual feedback that files can be dropped.

Drop files to upload

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