How to get multiple image file / data in controller of laravel

Question

I am sendign multiple input to laravel thorugh jquery ajax request.

here is my script

jqyery script:

var album_file=document.getElementById("upload_file").files;//getting multiple images

var albumname = document.getElementById('albumname').value;//albumname
 console.log(album_file);

 $.get('/photoalbum/?albumdetail='+album_file+'&albumname='+albumname,function(data){
              console.log(data);

           });

On onclick of upload bitton script executes and i m getting below data on console of album file

FileList {0: File, 1: File, length: 2}
length:2
0:File
  lastModified:1489731759920
  lastModifiedDate:Fri Mar 17 2017 11:52:39 GMT+0530 (India Standard    Time)
  name:"1.png"
  size:117627
  type:"image/png"
  webkitRelativePath:""
__proto__:
    File
    1:File

while in laravel controller on i m receving the request, In below form

  public function storealbum(Request $request)
{
   print_r($request::all());

}

and it printing :

Array ( [albumdetail] => [object FileList] [albumname] => tet )

What I want that instead of [object FileList] i want all my file object.

Where I am making mistake.

Chris · Accepted Answer · 2018-03-13 04:27:49Z

I know that this is an old topic but I was experiencing the same error.

The solution to this issue consisted of 2 things:

First, Send and select the actual file

Before I was selecting the file with the property .files but following the comments in this question How to upload a file using jQuery.ajax and FormData they indicate that you should actually do it with .files[0] in order to send the actual selected file.

Secondly, the AJAX call should exclude process data and content type

In the same question How to upload a file using jQuery.ajax and FormData they indicate that you should add two parameters to your AJAX call in order to avoid modifications to the data: processData:false and contentType:false here is the example code that they use:

$.ajax({
   url: "upload.php",
   type: "POST",
   data: formData,
   processData: false,
   contentType: false,
   success: function(response) {
       // .. do something
   },
   error: function(jqXHR, textStatus, errorMessage) {
       console.log(errorMessage); // Optional
   }
});

The formData should be initialized like this:

let formData = new FormData();
//And then include the attachments, can be just one file or an array of them
//The first parameter is the name of the field and the second one is just the data
formData.append('attachments', attachments_array);

I hope this answer can help anyone else in the future or at least to myself again.

Collectives™ on Stack Overflow

How to get multiple image file / data in controller of laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related