jQuery-File-Upload by blueimp - additional headers

16
votes

I've searched through wiki but couldn't find an answer where should I put my additional headers (for example Authorization header) in JS script? Somewhere onSend/beforeSend or?

Widget link: https://github.com/blueimp/jQuery-File-Upload

5
phpjqueryfile-uploadblueimp

5 Answers

12
votes

Did you try to set additional headers through "options.headers" object?

If using the forceIframeTransport: true option (with IE not supporting XHR file uploads you need to fall back on the hidden iframe approach), then modifying headers is not an option: https://github.com/blueimp/jQuery-File-Upload/issues/654

Options.headers: http://api.jquery.com/jQuery.ajax/

The options set for the File Upload plugin are passed to jQuery.ajax() and allow to define any ajax settings or callbacks.

28
votes

This is how I added the filename as a header:

$('#upload_btn').fileupload({
    singleFileUploads: true,
    beforeSend: function(xhr, data) {
        var file = data.files[0];
        xhr.setRequestHeader('X-FileName', file.name);
    },
});
10
votes

Try something like this..

beforeSend: function(xhr) {
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
}
2
votes

The answer is quiet simple : just add your custom headers in add section

  add: function (e, data) {         

                data.headers={'X-Session-Id' : data.files[0].name.hashCode()};

                data.context = $('<button/>').text('Upload')
                .appendTo(document.body)

                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));

                   // naam = naam.hashCode();
                    data.submit();
                });
        },

or in the initialisation :

$('#fileupload').fileupload({
        dataType: 'json',
        multipart : false,
        maxChunkSize: 10 * 1024 * 1024,
        headers:data.headers={'X-Session-Id' : "TEST-HEADER"},
1
votes

Here is my implementation

onSend: function(e, options) {
  var accessToken = ...;

  options.headers = {
    'Authorization': 'Bearer ' + accessToken
  };
},