Works with any backend npm install Zero dependencies

Custom Request Headers

Send static headers (e.g., auth tokens) with every upload request.

(function() {
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 headers: {
 'Authorization': 'Bearer my-jwt-token-here',
 'X-Custom-Header': 'custom-value'
 }
 });
})();

Headers on the requests the component makes

headers defaults to an empty object. Whatever you put in it is applied to the upload requests, which is how a bearer token, an API key or a tenant identifier travels with the file. Reach for this before withCredentials: it works cross-origin without cookies, and without the server having to allow credentialed requests.

What a custom header costs

Any header outside the small CORS-safelisted set makes a cross-origin upload preflighted, so the browser sends an OPTIONS request first and your server must answer it with that header named in Access-Control-Allow-Headers. A missing preflight response is the usual reason an upload that works same-origin fails the moment it crosses origins.

A token in a header is visible to anyone with the page open. Issue short-lived, narrowly scoped tokens, and never put a long-lived secret here.