Token Mismatch with vue-dropzone

Posted 1 year ago by rjarrard

If someone could help I would be most appreciative. I'm using vue-dropzone ^2.0.0 and Laravel 5.4.

I have the drag-and-drop portion working fine, but I always get a TokenMismatchException, even though I'm using the right token.

Here is the html:

<dropzone id="myVueDropzone" 
                   url="/uploadFile" 
                   @vdropzone-success="showSuccess" 
                   :headers="csrfHeader">
        
        <input type="hidden" name="csrf-token" :value="csrfToken">
</dropzone>

I've tried the name "_token" and "token" as well.

the data:

csrfToken: document.head.querySelector('meta[name="csrf-token"]').content,
csrfHeader: {
        'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content},

Vue toolbar says I have the right stuff:

csrfHeader: Object
    X-CSRF-TOKEN:"sVZ9px6OnXtQ6zdjYJ12yG7YmM6bYlidezTjJk9P"
csrfToken: "sVZ9px6OnXtQ6zdjYJ12yG7YmM6bYlidezTjJk9P"

I drag, it creates the upload, then gives me the exception

TokenMismatchException in VerifyCsrfToken.php line 68:

This setup is straight out of the docs. Is anyone familiar with this? I can share network info from the network tab if that would be helpful, or if you see some glaring error.

This seems more of a Laravel issue, but I could have put this in the Vue channel.

Please sign in or create an account to participate in this conversation.