Ad

Laravel TokenMismatchException And Dropzone

- 1 answer

I'm trying to upload pictures via dropzone, but I get tokenmismatch error even tho I added csrf token everywhere needed, i'm getting quite desperate...

My form

{!! Form::open(['route' => 'photo.upload', 'id' => 'hello', 'method' => 'POST', 'class' => 'dropzone no-margin dz-clickable']) !!}
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>
{!! Form::close() !!}

my script

Dropzone.autoDiscover = false;

Dropzone.options.hello = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 5, // MB
    parallelUploads: 2, //limits number of files processed to reduce stress on server
    addRemoveLinks: true,
    headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
    },
    accept: function(file, done) {
        // TODO: Image upload validation
        done();
    },
    sending: function(file, xhr, formData) {

        // Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
        formData.append("_token", $('input[name="_token"]').val() ); // Laravel expect the token post value to be named _token by default
    },
    init: function() {
        this.on("success", function(file, response) {
            // On successful upload do whatever :-)
        });
    }
};

// Manually init dropzone on our element.
var myDropzone = new Dropzone("#hello", {
    url: $('#hello').attr('action')
});

Request headers

...
X-CSRF-Token:P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
...

Request Payload

------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="_token"

P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="_token"

P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="file"; filename="Screen Shot 2016-01-14 at 18.27.40.png"
Content-Type: image/png


------WebKitFormBoundarySKMUFNO6dbgzeQVK--

and When I look in the generated form THERE IS the csrf field

<input name="_token" type="hidden" value="P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG">

Do you have any idea why it's not working even when I put crsf token where I should?

thank you for your time.

Ad

Answer

Simply place hidden field within your form like as

<input type="hidden" name="_token" value="{{csrf_token()}}">

You can make it different way by passing value of token using ajax call like as

$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
    });
});
Ad
source: stackoverflow.com
Ad