CODEWITHSUNDEEP
jqueryangularjsnode.jscsrfblueimp
user237865
user237865

Reputation: 1250

pass csrf token to blueimp fileupload

I'm building a SPA (Single Page Application) using AngularJS, and for FileUpload I'm trying to use Blueimp File Upload. Server side is in NodeJS, using csrf so all requests would be sent to the server with csrf token (X-XSRF-TOKEN set by AngularJS). Now when I'm trying to upload the file using Blueimp it fails with

"Error: invalid csrf token"

as it dint attach the necessary token in the request, now I'm wondering on how to set the token. Please note that I'm already using AngularJS, and I dont have any meta tag set to csrf, but the token is available in the cookies.

Thank you!!

Upvotes: 3

Views: 3315

Answers (4)

theycallmemorty
theycallmemorty

Reputation: 12962

Additional form data including the CSRF token can be passed along with the upload request via the formData option on the fileupload plugin.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#formdata

$('#whatever').fileupload({
            url: '/Document/Upload'
            paramName: 'file',
            dataType: 'json',
            pasteZone: null,
            formData: [{
                name: 'X-CSRF-TOKEN',
                value: getAntiCSRFToken()
            }]
        })

Upvotes: 0

jackyzhai
jackyzhai

Reputation: 413

In case anyone stumbled upon this page like me, it should be 

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $.cookie("XSRF-TOKEN")
    }
});

CSRF instead of XSRF.

Upvotes: 3

user237865
user237865

Reputation: 1250

I've fixed it by using the following:

$.ajaxSetup({
    headers: {
        'X-XSRF-TOKEN': $.cookie("XSRF-TOKEN")
    }
});

Thanks

Upvotes: 3

Vitone
Vitone

Reputation: 498

If I understand correctly, you can write an interseptor that sets the token in the request header: AngularJS $http

Upvotes: -1

Related Questions