How to include the CSRF token in the headers in Dropzone upload request?

Question

I am working on a single page application and I am using Laravel 5 for the web service.

All forms are submitted asynchronously and I use a beforeSend on them to attach the CSRF token which I take from the meta tag like so:

$.ajax({     url: '/whatever/route',     type: 'POST',     dataType: 'JSON',     data: $('form#whatever-form').serialize(),     beforeSend: function(request) {         return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));     },     success: function(response){         rivets.bind($('#whateverTag'), {whateverData: response});     },     error: function(response){     } }); 

All my forms work fine but dropzone upload doesn't. It gives me back a TokenMismatchException exception. Here is my dropzone code to update the profile photo:

$("#mydropzone").dropzone({     url: "/profile/update-photo",     addRemoveLinks : true,     maxFilesize: 5,     dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',     dictResponseError: 'Error uploading file!' }); 

I have tried putting the beforeSend in here too:

$("#mydropzone").dropzone({     url: "/profile/update-photo",     addRemoveLinks : true,     maxFilesize: 5,     dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',     dictResponseError: 'Error uploading file!',     beforeSend: function(request) {         return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));     }, }); 

I have also tried to put a global ajaxSetup in my main file like so:

$.ajaxSetup({     headers: {         'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')     } }); 

It is still not working. What am I doing wrong? How can I pass the CSRF token in the header with the dropzone upload so as to not a get an exception?

Answer 1

Okay so this code is working just fine now:

$("#mydropzone").dropzone({     url: "/profile/update-photo",     addRemoveLinks : true,     maxFilesize: 5,     dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',     dictResponseError: 'Error uploading file!',     headers: {         'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')     } }); 

So basically I needed to add the X-CSRFToken in the header of the Dropzone request. Works like charm now.

Answer 2

You can add csrf token for every jquery ajax request within your application with these code.

$.ajaxSetup({     headers: {         'X-CSRF-Token': $('meta[name="_token"]').attr('content')     } });