jQuery-File-Upload by blueimp - additional headers

Question

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

Red

Answer 1

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.

Phalarope

Where is this "headers" option you speak of? github.com/blueimp/jQuery-File-Upload/wiki/Options – Tunnell

@Mark: From that page: "The options set for the File Upload plugin are passed to jQuery.ajax()". So in addition to the listed options, you can also use all the options documented at api.jquery.com/jQuery.ajax. However, as the above answer explains, not all of them will necessarily work with the iframe transport. – Tildatilde

Answer 2

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);
    },
});

Tunnell

Answer 3

Try something like this..

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

Phalarope

Answer 4

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"},

Chere

data is undefined in headers:data.headers={'X-Session-Id' : "TEST-HEADER"}, – Bagel

This is what worked for me: headers: { Authorization: 'Bearer ' + $rootScope.app.token } – Gratianna

Answer 5

Here is my implementation

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

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

Klagenfurt