skip to Main Content

So I have problems with uploading my image files to controller via ajax. My partner suppose to have many images. I successfully sent my images to controller via ajax, but the files cannot be store to database for some reason. I tried to send back the files request back to console log and see only empty objects. Any solution, guys?

This is my form:

<form 
  id="kkpn-partnerImg-form"
  method="POST" 
  enctype="multipart/form-data"
      
 >
  <input 
    id="kkpn-upload-file" 
    type="file" 
    name="partnerImg[]"
    multiple
    accept="image/*"
    data-url="{{ route('partners.partner_upload_images.store', $partner->id) }}"
    hidden
  >
    <button
      class="btn btn-success" 
      id="kkpn-upload-btn"
     >
       Upload your images
    </button>
</form>

This is my Javascript:


$(document).ready(function(){

  $('#kkpn-upload-btn').on('click', openDialog)

  function openDialog(){
    document.getElementById('kkpn-upload-file').click();
  }

  $('#kkpn-partnerImg-form').on('submit', function(e){

    e.preventDefault();

    var formData = new FormData(this);

    if ($('#kkpn-upload-file').get(0).files.length != 0) {
      var uploadUrl = $('#kkpn-upload-file').data('url');

      formData.append(
        '_token',
        $('meta[name="csrf-token"]').attr('content')
      )

      for (var pair of formData.entries()) {
        console.log(pair[0]+ ', ' + pair[1]); 
      }
      
      $.ajax(
        {
          url: uploadUrl,
          type: 'POST',
          data: formData,
          cache:false,
          contentType: false,
          processData: false,

          success: function(response){
            console.log(response.data)
          },
          error: function(error){
            console.log('Error Occured!')
          }
        }
      )
    }

  })

  $('#kkpn-upload-file').on('change', function(){
    $('#kkpn-partnerImg-form').submit()
  })

})

This is my controller:

public function store(Request $request, $id)
  {
    $partner = Partner::where('id', $id)->first();

    foreach($request->file('partnerImg') as $fileImg){
      $partnerImg = new PartnerImg;
      $partnerImg->img_path = $fileImg->store('partners');
      $partnerImg->partner()->associate($partner);
      $partnerImg->save();  
    }
    
    return response()->json([
      'data' => $request->file('partnerImg')
    ]); 
    
  }

So it didn’t give me any errors or anything, it just can’t store the file and when i return my request with files, it gave me empty objects. If any one know how to solve this, please help!

And this is what I get after successfully response of ajax:
enter image description here

3

Answers


  1. Chosen as BEST ANSWER

    For some reason, I delete everything and redo again! It works! Sorry guys! But thanks for suggestion!


  2. As you’re uploading an array of files, have you attempted accessing them with

    foreach($request->file('partnerImg[]') as $fileImg) {
    

    in your controller?

    Source: https://laracasts.com/discuss/channels/laravel/how-upload-multiple-files-using-ajax-in-laravel

    Login or Signup to reply.
  3. first problem i have seen is that you are not passing the $id parameter on ajax

    public function store(Request $request, $id)
      {
        $partner = Partner::find($id); //change to this!
    
        foreach($request->file('partnerImg[]') as $fileImg){
          $partnerImg = new PartnerImg;
          $partnerImg->img_path = $fileImg->store('partners');
          $partnerImg->partner()->associate($partner);
          $partnerImg->save();  
        }
        
        return response()->json([
          'data' => $request->file('partnerImg[]')
        ]); 
        
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search