CODEWITHSUNDEEP
javascriptdropzone.js
sveti petar
sveti petar

Reputation: 3787

Dropzone.js form gives 419 error despite inclusion of CSRF token

I've been writing various form/ajax requests in Laravel for years and this is the first time I'm having this issue - I have a CSRF token set in my PUT request, yet I am getting a 419 error. The error occurs with a Dropzone.js form:

<form class="form-horizontal dropzone" method="POST" action="{{ route('breaks.upload_photos', $break->id) }}" enctype="multipart/form-data"></form>

<!-- Dropzone Scripts -->
<script src="{{ asset('dropzone/dist/dropzone.js') }}"></script>
<script type="text/javascript">
    Dropzone.autoDiscover = false;
    let myDropzone = new Dropzone(".dropzone",{
        maxFilesize: 30,        //in MB
        acceptedFiles: ".jpeg,.jpg,.png,.pdf",    //accepted file types
        method: "put"           //sets the form method to PUT
    });
    myDropzone.on("sending", function(file, xhr, formData) {
        formData.append("_token", $('meta[name="csrf-token"]').attr('content'));   //sets CSRF token
    });
</script>

When I try to upload photos through the Dropzone interface here, I get this in the console:

PUT http://127.0.0.1:8010/breaks-upload-photos/12 419 (unknown status)

And when I check the request, I see this:

enter image description here

This is the correct token, which I have verified by checking my other forms (which work correctly).

Any input on how I can fix this, or at least guess what the problem is?

Upvotes: 0

Views: 942

Answers (1)

sveti petar
sveti petar

Reputation: 3787

I'll answer it myself.

It turns out that it's not enough to add the CSRF token to formData, but you also have to pass it as a header. This works:

let myDropzone = new Dropzone(".dropzone",{
    maxFilesize: 30,        //in MB
    acceptedFiles: ".jpeg,.jpg,.png,.pdf",    //accepted file types
    method: "put"           //sets the form method to PUT,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
});

Upvotes: 2

Related Questions