Laravel 5.8 ajaxupload POST 419（未知状态）

Question

I have a problem. I want to upload img using ajaxupload but i can`t do it, i always get exception POST 419 (unknown status). I do everything using to the documentation but I have no idea.

So, my route:

Route::post('/products/image','ProductController@image');

In main layouts I have:

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

My form.blade.php

 <form action="{{route('')}}" method="post">
 @csrf
 <div class="box box-danger box-solid file-upload">
    <div class="box-body">
       <div id="single" class="btn btn-success" 
        data-url="products/image" data-name="single">
           Chose
        </div>
        <div class="single"></div>

And my app.js:

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


  if($('div').is('#single')){
        var buttonSingle = $("#single"),
        buttonMulti = $("#multi"),
        file;
    }

   if(buttonSingle){
     new AjaxUpload(buttonSingle, {
     action: '/admin/' + buttonSingle.data('url') + "?upload=1",
     data: {name: buttonSingle.data('name')},
     name: buttonSingle.data('name'),

     onSubmit: function(file, ext){
        if (! (ext && /^(jpg|png|jpeg|gif)$/i.test(ext))){
            alert('Exception');
            return false;
        }

      buttonSingle.closest('.file-upload').find('.overlay').css({'display':'block'});

    },

     onComplete: function(file, response){
        $res = JSON.parse(response);
        if($res['error']){
            alert($res['error']);
            buttonSingle.closest('.file-upload').find('.overlay').css({'display': 'none'});
            return false;
        }
        setTimeout(function(){
            buttonSingle.closest('.file-upload').find('.overlay').css({'display':'none'});

            response = JSON.parse(response);
            $('.' + buttonSingle.data('name')).html('<img src="/images/' + response.file + '" style="max-height: 150px;">');
        }, 1000);
    }
});

Answer 1

You should have something like that in header section

<meta name="_token" content="{{ csrf_token() }}"><meta>

or

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

And this is a common script which should load in any DOM element

<script>
    $(function () {
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
        });
    });
</script>

Note: Use correct name name="_token" or name="csrf-token"

Answer 2

I had exactly same issue with Dropzone upload Please don't forget to add enctype="multipart/form-data" as form attribute And try to send this token data like that

data: {
   _token: $('meta[name="csrf-token"]').attr('content'),
   name: buttonSingle.data('name')
},