Uploading File using Ajax Issue

Question

My HTML Form

<center>
    <form enctype="multipart/form-data">
           {{ csrf_field() }}
         <label class="fileContainer">
          <input type="file" id="uploadFile" name="input_upload_file[]" multiple />
        </label>                       
    </form>
   <button onclick="uploadFile()">Upload</button>
 </center>

My AJAX

My Ajax seems fine but the problem is input file value. I can't figure out.

When I try this var input_upload_file = $('#uploadFile').val();

it will return Eg. C:/fakepath/image.png

  function uploadFile(){
  var input_upload_file = $('#uploadFile').val();
  alert(input_upload_file);
  $.ajax({
    type:'POST',
    url:'{{ url("/upload-file") }}',
    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    data: {input_upload_file:input_upload_file},
    success: function(data){}else{}
     },
    error: function(data){ }
    });      
}

Anyone please help me!

have you checked this out?: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — lollmbaowtfidgafgtfoohwtbs, Apr 24 '18 at 03:20
Possible duplicate of [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Ohgodwhy, Apr 24 '18 at 03:21
use ajax from plugin for uploading file through ajax. same probleam i faced on my previous work :) — Ravindra Bhanderi, Apr 24 '18 at 03:55

score 0 · Answer 1 · answered Apr 24 '18 at 05:11

in your blade view :

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

  <body>
     <form id="image_upload_form">
       {{ csrf_field() }}
        <label class="fileContainer">
        <input type="file" id="uploadFile" name="input_upload_file[]" multiple />
    </label>                       
    </form>
    <button type="button" onclick="uploadFile()">Upload</button>
  </body>

Your Ajax function should be like this :

<script>
   function uploadFile(){

    var form = new FormData(); 

     $.each($("#uploadFile")[0].files, function(i, file) {
       data.append('input_upload_file['+i+']', file);
     });

      $.ajax({
        async: true,
        crossDomain: true,
        url: "YOUR URL",
        method: "POST",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        processData: false,
        contentType: false,
        mimeType: "multipart/form-data",
        data: form,
        success:function(response){

        },error:function(err){

        }
    });
 } 
</script>

I got this error Uncaught ReferenceError: data is not defined data.append('input_upload_file['+i+']', file); — Mcfaith, Apr 24 '18 at 05:47

Uploading File using Ajax Issue

1 Answers1