CSRF token support.

[nathanstitt]

I've added CSRF (cross-site request forgery token) support, as I needed it for a rails app which uses the Devise user authentication library.

Looks for a CSRF meta tag on the page, and if found adds a X-CSRF-Token header to the request.

An alternate implementation would be to add an option to either set the csrf token manually, or just one that allows adding arbitrary headers. If you'd prefer I can work something like one of those up.

Thanks for your great work on the library, it's making file uploads much easier for me!

[blueimp]

Thanks for your contribution, but it's already possible to add arbitrary request headers using the requestHeaders option.
This feature was already added about one month ago, but unfortunately I didn't add any documentation.
I've now added a section to the Options documentation (search for "requestHeaders" on the page).
I also just commited an update so this option accepts an Array of Objects with name and value attributes, or a simple Object.

[nathanstitt]

Sorry, I didn't think to look in the code to see if you'd added something for that, just did a quick docs scan. I'll just use that option then.

Thanks again!

[blueimp]

Nah, it's my fault, should have documented it along with adding the feature.
Thanks for using the plugin. :)

[twig]

Hi there,

I just took a look at those links and can't seem to find the requestHeader options. Have they been moved?

[blueimp]

Since version 5, the plugin accepts all $.ajax parameters as part of its options object.
You can therefore just make use of the headers option to set additional request headers.

However please note that the Iframe Transport (required by IE and Opera) doesn't support setting request headers.
To implement cross-browser CSRF protection, I would recommend making use of URL parameters, as shown here for the destroy callback:
https://github.com/blueimp/jQuery-File-Upload/wiki/Plugin-extensions

[twig]

Thanks for that!

[etdsoft]

Using the headers option like this:

  $('#fileupload').fileupload({
    dropZone: $('#dropzone'),
    headers: {
      'X-CSRF-Token': csrf_token
    }
  });

Seems to do the trick for file uploads, however the header is not attached in the destroy action (when clicking the delete button). It seems that the _getAJAXSettings() method is not invoked inside the destroy() handler. @blueimp ?

[blueimp]

That's because deleting files is not part of the core plugin, it's only part of the UI version.
However you can add the header easily by overriding the destroy callback option:

$('#fileupload').fileupload({
    headers: {
        'X-CSRF-Token': csrf_token
    },
    destroy: function (e, data) {
        data.headers = $(this).data('fileupload')
            .options.headers;
        $.blueimpUI.fileupload.prototype.options.destroy
            .call(this, e, data);
    }
});

[etdsoft]

Thanks, this did the trick. However, I had to slightly amend the last line based on the Plugin extensions example to include a .options.:

    destroy: function (e, data) {
      data.headers = $(this).data('fileupload').options.headers;
      $.blueimpUI.fileupload.prototype.options.destroy.call(this, e, data);
    }

[blueimp]

You're totally right, the ".options" was missing - I was typing it out of memory, my mistake. :D

[jonasrn]

There is the possibility of putting an ajax call inside the method?

$('#fileupload').fileupload({
destroy: function (e, data) {

        var server = "/site/index/deletar";
        $.getJSON(server)
            .done(function(data2) {
                console.log(data2);
                console.log(data);
                $.blueimpUI.fileupload.prototype.options.destroy.call(this, e, data);           


        });


    }
});

when I do that then he give the following error

TypeError: that is undefined
[Parar neste erro]

that._adjustMaxNumberOfFiles(1);

[jedierikb]

@blueimp Could you provide an example of how to implement your suggestion for using URL parameters for iframe upload? Finding it difficult to adapt your example of extending options for Delete. Much appreciated.

[blueimp]

You can use formData to send CSRF tokens:
https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

[junaidatique]

Hey,

I am using codeigniter CSRF and I am unable to send the token. Can you please tell me how can I do it.

[gabn88]

I might be stupid, but when I do this:

  data.headers = {
        'X-CSRFToken': csrftoken
        },
  $.blueimp.fileupload.prototype.options.destroy.call(this, e, data);

the deletion is working, but it is not removed from the page. $.blueimpUI is not defined for me.