Laravel: Dropzone js, getting [object Object], but why?

Question

I'm trying to upload an image using Dropzone.js in Laravel, but I'm getting an error showing [object Object] on my thumbnails after uploading a photo. I can't find my error and I don't understand what the cause is.

Here is my code and an image of the error. Why is this happening? What can I do?

View:

<div class="container col-md-8 col-12 mx-auto">
        <div class="row">
            <div class="col-sm-10 offset-sm-1">
                <h2 class="page-heading">Upload your Images <span id="counter"></span></h2>
                <form method="post" action="{{ url('/addimage') }}"
                      enctype="multipart/form-data" class="dropzone" id="my-dropzone">
                    {{ csrf_field() }}
                    <div class="dz-message">
                        <div class="col-xs-8">
                            <div class="message">
                                <p>Drop files here or Click to Upload</p>
                            </div>
                        </div>
                    </div>
                    <div class="fallback">
                        <input type="file" name="file" multiple>
                        <input type="hidden" name="id" value="{{$id}}" >
                    </div>
                </form>
            </div>
        </div>
    </div>

Route:

Route::group(['middleware'=>'auth'], function (){
...
Route::post('/addimage', 'FrontendController@addimage');
Route::post('/adddeleteimage', 'FrontendController@adddeleteimage');
...
});

Controller:

public function addimage(Request $request){
    $file = $request->file('file');
    $filename = uniqid().".".$file->clientExtension();
    $file->move('img/product', $filename);


    $dropzone = new Imagedb;
    $dropzone->product_id = $request->id;
    $dropzone->url = 'img/product'.$filename;

    $dropzone->save();
}

JS:

var total_photos_counter = 0;
    Dropzone.options.myDropzone = {
        uploadMultiple: true,
        parallelUploads: 2,
        maxFilesize: 16,
        acceptedFiles: "image/*",
        resizeWidth: 360,
        previewTemplate: document.querySelector('#preview').innerHTML,
        addRemoveLinks: true,
        dictRemoveFile: 'Remove file',
        dictFileTooBig: 'Image is larger than 16MB',
        timeout: 10000,

        init: function () {
            this.on("removedfile", function (file) {
                $.post({
                    url: '/adddeleteimage',
                    data: {id: file.name, _token: $('[name="_token"]').val()},
                    dataType: 'json',
                    success: function (data) {
                        total_photos_counter--;
                        $("#counter").text("# " + total_photos_counter);
                    }
                });
            });
        },
        success: function (file, done) {
            total_photos_counter++;
            $("#counter").text("# " + total_photos_counter);
        }
    };

Answer 1

Firstly, try

$('meta[name="csrf-token"]').attr('content')

as token

Answer 2

I fixed this error by adding in head tag

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

and in dropzone initialization config

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

Example:

  autoProcessQueue:false,
  required:true,
  acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
  addRemoveLinks: true,
  maxFiles:8,
  parallelUploads : 100,
  maxFilesize:5,
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }