JS API

<button id="btn-addfiles">Add Files</button>
<button id="btn-upload">Upload All</button>
<button id="btn-reset">Reset</button>
<button id="btn-cancel">Cancel All</button>

<div id="myUploader" class="mu-uploader">...</div>

var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 autoUpload: false
});

document.getElementById('btn-addfiles').addEventListener('click', function() {
 uploader.browse();
});
document.getElementById('btn-upload').addEventListener('click', function() {
 uploader.upload();
});
document.getElementById('btn-reset').addEventListener('click', function() {
 uploader.reset();
});
document.getElementById('btn-cancel').addEventListener('click', function() {
 uploader.cancelAll();
});

Driving it entirely from code

The instance exposes the same actions the built-in UI uses: browse(), upload(), pause(), resume(), cancel(), retry(), addFile(), reset(), and getStats() for the aggregate numbers.

Turn autoUpload off first

autoUpload defaults to true, so files start moving before your code decides anything. Any interface that means to control the queue itself wants it false, so upload() is genuinely what starts the transfer.