Javascript upload cropped image errors on POST with 419 (unknown status)

[afarral]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Returns POST url 419 (unknown error)
My javascript is:

<script>
var canvas  = $("#canvas"),
    context = canvas.get(0).getContext("2d"),
    $result = $('#EmployeePhoto');
    $formpic = $('#formemployeephoto').attr('action');

$('#fileInput').on( 'change', function(){
    if (this.files && this.files[0]) {
      if ( this.files[0].type.match(/^image\//) ) {
        var reader = new FileReader();
        reader.onload = function(evt) {
           var img = new Image();
           img.onload = function() {
             context.canvas.height = img.height;
             context.canvas.width  = img.width;
             context.drawImage(img, 0, 0);
             var cropper = canvas.cropper({
               aspectRatio: 2 / 3,
               preview: '.img-preview'
             });
             $('#btnCrop').click(function() {
                // Get a string base 64 data url
                var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 
                $result.attr('src', croppedImageDataURL);
                
                canvas.cropper('getCroppedCanvas').toBlob(function(blob) {
                    url = URL.createObjectURL(blob);
                    var reader = new FileReader();
                     reader.readAsDataURL(blob); 
                     reader.onloadend = function() {
                        var base64data = reader.result;	

                        $.ajax({
                            type: "POST",
                            dataType: "multipart/form-data",
                            url: $formpic,
                            data: {'XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'image': base64data},
                            success: function(data){
                                $modal.modal('hide');
                                alert("success upload image");
                            }
                            ,
                            error: function () {
                                alert('Upload error');
                            }
                        });
                    };
                });  
             });
           };
           img.src = evt.target.result;
	};
        reader.readAsDataURL(this.files[0]);
      }
      else {
        alert("Invalid file type! Please select an image file.");
      }
    }
    else {
      alert('No file(s) selected.');
    }
});

1. the csrf-token looks to be correct
2. I have checked php post size and upload size parameters are ok
3. I have tried having dataType as "multipart/form-data" and as "Json"
   $formpic is is populated as the action of a form already in the page

the report in the developer tools of chrome is:
POST http://127.0.0.1:8000/hrmodule/employees/updatePhoto/3 419 (unknown status)

coumn1	column 2
xhr.onloadend	@ main.js?attr=FIgYc-D…xdquLDTxjt9uYA:1024
XMLHttpRequest.send (async)
window.XMLHttpRequest.open	@ main.js?attr=FIgYc-D…xdquLDTxjt9uYA:1030
XMLHttpRequest.open	@ javascript?v=1588355796:1215
send	@ jquery.min.js:2
ajax	@ jquery.min.js:2
reader.onloadend	@ edit:827
FileReader (async)
(anonymous)	@ edit:823

Expected behavior

The file successfully uploads

Minimal reproduction of the problem with instructions

Environment

jquery-cropper version: 1.0.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[fengyuanchen]

Does this is an issue of the jQuery Cropper?