Empty array when dd($request->all()) upload file via ajax laravel

Question

first of all i try to do the file uploading via ajax , when i try dd($request->all()) in my controller , it give result empty array

public function uploadFile(Request $request){
   
    dd($request->all());

}

My blade view with ajax

<label for="inputfile">
  <a  title="Click here to upload record "><i class="fa fa-upload"></i></a>
</label>
    <input id="inputfile" name="inputfile" type="file" />



 <script>

 $('#inputfile').on('change',function(ev){
   ev.preventDefault(); 
   var postData=new FormData();
   postData.append('file',this.files[0]);
    
      $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},
            type:"get",
            contentType:false,
            data:postData,
            processData:false,
            dataType:'json',
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    });    }); 
    </script>

My laravel version is 5.8 . The flow is when the user upload attachment, it will directly store to file storage without clicking button submit . But when i try to retrieve $request->all() its return empty array which is i can't continue further step. Sorry if my explaination not clear .

Answer 1

Please ensure you are using the form multipart setting correctly. This is usually the issue in most cases.

<form action="upload.php" method="post" enctype="multipart/form-data">

Answer 2

Yes ok laravel can be a real pain sometimes especially when it comes to file uploads.

You can try this article for laravel 5.8 give it a try and let me know if it works.

https://www.w3adda.com/blog/laravel-5-8-jquery-ajax-form-submit

I think the main difference with this article is the way it sets the data in the ajax call. However you might need to check the whole article over and compare it to your code.

 $.ajax({
  url: "{{ url('jquery-ajax-form-submit')}}",
  method: 'post',
  data: $('#contact_us').serialize(),

Answer 3

 let files = $('#inputfile');
    let image = files[0].files;

let form_data = new FormData();
    if (image.length > 0) {
        for (let i = 0; i < image.length; i++)
            form_data.append('inputfile[]', image[i]);
    }


            $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},
            type:"get",
            contentType:false,
            data:form_data,
            processData:false,
            dataType:'json',
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    
            });    
          }); 

try this.

Answer 4

You just need to set "Content-Type" in header. You also have pass type get, for file upload must require post. have you console.log(this.files[0]);

<script>

 $('#inputfile').on('change',function(ev){
   ev.preventDefault(); 
   console.log(this.files[0]);
   var postData=new FormData();
   postData.append('file',this.files[0]);
    
      $.ajax({
            url:'{{url('reporting/uploadFile')}}',
            headers:{
               'X-CSRF-Token':$('meta[name=csrf_token]').attr('content'),
               'Content-Type': undefined 
            },
            type:"POST",
            data:postData,
            success: function( data ) {
               console.log(data)
            },
            error: function() {
                alert('error');
            }    });    }); 
    </script>