Dynamic Headers (Function)

(function() {
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 headers: function(task) {
 return {
 'Authorization': 'Bearer ' + (document.cookie.match(/token=([^;]+)/)||[])[1] || 'none',
 'X-File-Name': encodeURIComponent(task.fileName),
 'X-Request-Id': MultipleUpload.generateId()
 };
 }
 });
})();

Headers that are computed, not fixed

headers takes a function as well as an object. That is the difference that matters for authentication: a token read once when the uploader is constructed is the token you keep sending, and a long upload session will outlive it.

The failure it prevents

Short-lived tokens are good practice, and they are exactly what breaks a fixed header. The queue starts fine, then requests begin coming back 401 partway through for no visible reason. Computing the header per request means each one carries a token that is current when it is sent.