Works with any backend npm install Zero dependencies

External Trigger

Use external buttons placed outside the uploader div to trigger file selection and upload.

Drag & drop files here (or use buttons above)
var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 autoUpload: false // Manual upload via external button
});

// External button triggers
document.getElementById('selectBtn').addEventListener('click', function() {
 uploader.openFileDialog();
});
document.getElementById('uploadBtn').addEventListener('click', function() {
 uploader.startUpload();
});
document.getElementById('clearBtn').addEventListener('click', function() {
 uploader.clearQueue();
});

Starting the upload from elsewhere

With autoUpload off, the queue waits until something calls upload() — and that something can be anywhere on the page. A form's submit handler, a wizard's next button, a toolbar rendered by a different component entirely.

Finding the instance from there

MultipleUpload.getInstance(idOrSelector) returns the uploader bound to a container, so the external trigger does not need a reference passed to it. That is what keeps the two parts of the page decoupled instead of threading an object between them.