array(0) { } when retrieve data of formData ajax request in laravel controller

Question

I have text and image input in a form. I want to send the data through ajax request. I use dataForm as the format to send to Laravel controller. I get array(0) {} when i try to retrieve the input form.

This is my ajax request code:

$("form").on('submit', function(){

var data = new FormData(this);
var url = "{{ route('ajaxSubmitFormWizardsEmployee') }}";
var csrf_token = $(this).find('input[name="_token"]').val();

$.ajaxSetup({
     headers: {
    'X-CSRF-TOKEN': csrf_token,
     }
});
$.ajax({
 type: "POST",
 url: url,
 async: false,
 cache: false,
 contentType: false,
 processData: false,
    data: {
        data : data,
    },
    success:function(data){
    console.log(data);
    },
     error: function() {
    console.log('error);
     },
    
}); 

Laravel controller:

public function ajaxSubmitFormWizardsEmployee(Request $request) {
    $input = $request->all();        
    print_r($input);
}

I managed to console log the formData before send ajax by adding this code:

for (let obj of data) {
   console.log(obj[0],obj[1]);
}

Below is the picture console log the formData before send ajax: console log the formData before send ajax

Below is the picture console log when try to retrieve or view data from Laravel controller: retrieve or view data from Laravel controller

Answer 1

I see that you are trying to submit a file, does your form have this attribute:

enctype="multipart/form-data"