Multiple Files upload Angular + Laravel - php

Question

I'm working with Angular. I've to upload multiple images on via an API (made/written in Laravel).
The following body is accepted by the api
portfolio_id: 2
portfolio_image: [ {file1}, {file2} ] //Accepts in this format. File Objects in an array
My angular code is:
HTML
<div class="col-lg-12">
<label class="file-upload-label">Upload Profile Picture</label>
<input multiple (change)="fileSelected($event)" type="file" id="file" name="profile_pic"/>
<label for="file" class="btn-2">Upload</label>
</div>
Component.ts
selectedFile;
fileSelected(event) {
console.log(event);
this.selectedFile = <File>event.target.files;
console.log("Selected Files are:",this.selectedFile)
}
On button submit I'm running the following function from component.ts file:
portfolioImage(){
const formData = new FormData();
formData.append("portfolio_id", this.portfolioId);
formData.append("portfolio_image", this.selectedFile)
this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res => {
console.log(res);
alert('Files uploaded Successfully!');
})
}
Console Output: On file selection change event I see the following in console.log
FileList [ File, File ]
Upon expanding the array I see the following:
FileList(2)
0: File { name: "1.jpg", lastModified: 1578490559152, size: 317383, … }
1: File { name: "2.jpg", lastModified: 1578490599778, size: 288174, … }
length: 2
Issue:
Up on submission I see nothing in params on the network tab although I do get a images uploaded successfully message.
Things I've tried
I tried to upload via loop and changed the fileSelected(event) function to:
myFiles:string [] = [];
fileSelected(event) {
for (var i = 0; i < event.target.files.length; i++) {
this.myFiles.push(event.target.files[i]);
}
}
and upload function to:
portfolioImage(){
console.log("myfile",this.myFiles);
const formData = new FormData();
formData.append("portfolio_id", this.portfolioId);
for(var i = 0; i < this.myFiles.length; i++) {
formData.append("portfolio_image", this.myFiles[i]);
}
this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res => {
console.log(res);
alert('Files uploaded Successfully!');
})
}
But still no luck.
Summary: How to upload multiple files using angular on frontend and laravel api on backend. The laravel api accepts the files as objects in array: [ {file}, {file} ].
Any help will be highly appreciated. Thank you.

Answer 1

You did a little mistake in your upload function, consider the given
portfolioImage(){
const formData = new FormData();
formData.append("portfolio_id", this.portfolioId);
for(var i = 0; i < this.myFiles.length; i++) {
formData.append("portfolio_image[]", this.myFiles[i]);
}
this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res => {
console.log(res);
alert('Files uploaded Successfully!');
})
}
The portfolio_image should be used as given to make it multiple file array in formData. from your Laravel controller function, use as given to check uploaded temp files.
public function uploader(Request $request){
$data = [
$request->allFiles(),
];
return response()->json($data);
}