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?