Dropzone CSRF token mismatch Laravel 5

Question

I am using Dropzone to upload images using Laravel 5. After Dropzone makes the put call to my URL I get the following error:

TokenMismatchException in VerifyCsrfToken.php line 67:

However, when I look at the payload for the request the token is present:

------WebKitFormBoundary91A7BYrMsDcGTEvx Content-Disposition: form-data; name="_method"

PUT ------WebKitFormBoundary91A7BYrMsDcGTEvx Content-Disposition: form-data; name="_token"

j3NbjibYF7k8g2w1P0enw6YVfDrDvCGKFMCFt4NX ------WebKitFormBoundary91A7BYrMsDcGTEvx Content-Disposition: form-data; name="title"

Here is my JS:

    Dropzone.options.realDropzone = {
        url: '/user/manage/10',
        method: 'PUT',
        paramName: 'file',
        uploadMultiple: false,
        parallelUploads: 100,
        previewsContainer: '#dropzonePreview',
        addRemoveLinks: true,
        maxFiles: 10,
        autoProcessQueue: false,

        init: function () {
            var dropZone = this;

            this.element.querySelector("#save").addEventListener("click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                console.log("clicked submit");
                dropZone.processQueue();
            });
        },
    };

My form:

{!! Form::model($asset, ['method' => 'PUT', 'class' => 'dropzone', 'id' => 'real-dropzone', 'action' => ['UserManagementController@update', $asset->id], 'file' => true]) !!}

My controller:

   public function update(Request $request, $id)
    {

        return dd(FileRequest::file('file'));
    }

So I just found out that when I submit the request with Dropzone there is no data being sent to my controller which is why I get the token mismatch. Any ideas why dropzone is not submitting the whole form? — Gabe Levasseur, Jun 14 '16 at 17:12

score 20 · Answer 1 · answered Jun 19 '16 at 12:43

20

Try to add the token in your Dropzone options:

sending: function(file, xhr, formData) {
    formData.append("_token", "{{ csrf_token() }}");
},

answered Jun 19 '16 at 12:43

Clemen

404
2
8

Bravo ! I was integrating Dropzone into my normal form. I was gettting the same issue for last 2 days and now on 3rd day, I read your answer and It simply solved my issue. Thanks – Shaan Jul 07 '20 at 09:01

score 5 · Answer 2 · edited Sep 30 '19 at 13:09

5

You can just add {{ csrf_field() }} in your form

edited Sep 30 '19 at 13:09

thisiskelvin

4,136
1
10
17

answered May 10 '17 at 09:47

Jean-Marc Amon

969
13
16

sorry, but how about if inside vue component? – hannn1 Apr 20 '21 at 09:52
1

You can have more here https://stackoverflow.com/questions/45523101/how-to-refer-laravel-csrf-field-inside-a-vue-template – Jean-Marc Amon Apr 22 '21 at 09:15

score 5 · Answer 3 · edited Sep 21 '21 at 08:53

My working code for Laravel 5.6:

HTML

<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

jQuery

Dropzone.autoDiscover = false;
$(document).ready(function() {
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $("div#my-awesome-dropzone").dropzone({
        url: "{{ url('/upload') }}",
        headers: {
            'x-csrf-token': CSRF_TOKEN,
        },
    });
});

score 2 · Answer 4 · answered Sep 21 '21 at 08:51

HTML code in a blade file

<head>
    …
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div class="dropzone" id="my-dropzone"></div>
</body>

JavaScript

Dropzone.autoDiscover = false;
new Dropzone('#my-dropzone', {
    url: '/upload',
    headers: {
        'x-csrf-token': document.head.querySelector('meta[name="csrf-token"]').content,
    },
});

Dropzone CSRF token mismatch Laravel 5

4 Answers4

Linked