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.