dropzone laravel，显示419错误

Question

I have tested all that I have seen but it has not worked to me, I am using dropzone with laravel and my problem is that it displays a 419 error, I know what it means it's about csrf token but I can not fix it.

My HTML code is this:

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

My javascript code is this:

Dropzone.autoDiscover = false;

$(document).ready(function(){

   $('#my-dropzone').dropzone({
      url: 'http://54.161.128.196/pre_image/store',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
      },
      method: 'post',
      dictResponseError: 'Error uploading file!'
   });

});

My Laravel route:

Route::post('/pre_image/store', 'Pre_ImageController@store');

I put this in the middleware to see if I could remove the 419 error:

It is in the VerifyCsrfToken middleware

protected $except = [
    'pre_image/store'
];

And it did not work, I have the csrf token in the meta like this:

<meta name="csrf-token" content="{{ csrf_token() }}">

This is screenshot of the error:

So I wonder what is the problem why does it display 419 error if it that route is disabled to verify the token and even it has the token assigned?

Thanks!

Answer 1

I had similar issues with Dropzone. I ended up pulling the headers into an ajax function at the top of the page rather than in the DZ headers section. This allowed for any general ajax request to have the correct CSRF.

Try this:

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

Answer 2

If anybody else is getting this problem uploading images in a form, and the above solution doesn't work, here is my solution. I found the Javascript code that was generating the src data on the webpage.

In my case, it was this:

  $('#'+newId).attr('src', canvas.toDataURL());

The problem with this is that it defaults to a PNG file, which is very large. If you change it to the following, you will have a much smaller file which will be a lot easier to upload.

$('#'+newId).attr('src', canvas.toDataURL('image/jpeg', 0.7));

This will produce a much smaller upload file. My problem was if I tried to upload more than 3 pictures I would get the error message. If the quality isn't good enough, change the 0.7 to 0.8.