How to upload multiple images/files in angular with laravel api?

Question

Hi im trying to upload multiple files at once in angular 8 and laravel api. I am able to store single image using this code.. Angular code:

    <input type="file" name="image" (change)="uploadImage($event)">

    uploadImage(event) {
    console.log(event);
    this.img = <File>event.target.files[0];
    }

    const formdata = new FormData();
    formdata.append('image', this.img, this.img.name);

Laravel code: this is how i move image to a folder and then store name into database..

    $img = $request->file('image');
    $image = str_random(10).time().'.'.$img->getClientOriginalExtension();
    $destination = 'assets/images/';
    $img->move($destination, $image);

How can i do this for multiple files at once?

Invincible me · Accepted Answer · 2019-07-16 11:36:28Z

Finally i made it work by loops in Angular and as well in Laravel Controller Idk, if it's a right solution, but i will post this as answer so maybe others benefit from it, below is my code.. HTML

    <input type="file" required name="images" (change)="uploads($event)" multiple>

Typescript function on change

    uploads(event) {
        console.log(event);
         this.docs = <File>event.target.files;
         this.length = <File>event.target.files.length;
   }

get formdata

    const formdata = new FormData;
    for (let i = 0; i < this.length; i++) {
                formdata.append('docs'+[i], this.docs[i], this.docs[i].name );
                formdata.append('length', this.length
            }

Then send this form data through api..and then in Laravel Controller, i used another loop to move each image into a folder and set a random name, and then add that name to a array.

    $length =  $request->length;
    for ($i=0; $i < $length; $i++) { 
            $img[$i] = $request->file('images'.$i);
            $image = str_random(10).time().'.'.$img[$i]->getClientOriginalExtension();
            $destination = 'assets/images/';
            $img[$i]->move($destination, $image);
            $images[] = $image;
            }

Then save this array into database using json_encode($images) function.

DimaShah · Accepted Answer · 2019-07-15 14:46:26Z

1

Here is the sample code:

In HTML:

<input type="file" (change)="upload($event)" multiple/>

In ts

    upload(event){

    const fileList: FileList = event.target.files;
        for (let x = 0; x < fileList.length; x++) {
                      formData.append("someFile", fileList[x], fileList[x].name);
                    }
        this.uploadFiles(formData).subscribe();         


    }
uploadFiles(formData: any): Observable<any> {
            const req = new HttpRequest('POST', 'api/uploads', formData, {
              reportProgress: true,
              headers: new HttpHeaders()
                .append('enctype', 'multipart/form-data')
            });

            return this.http
              .request(req);
          }

edited Jul 15, 2019 at 14:46

answered Jul 15, 2019 at 14:26

DimaShah

2422 silver badges5 bronze badges

Comments

cnps · Accepted Answer · 2019-07-15 08:17:41Z

0

I think file upload is a weak point in angular, but it can be done by storing input value as FileList object. FileList is not iterable, so if you need to validate, you could convert it to File[] ie. Array.from();

Just send the object/array with a normal http request

answered Jul 15, 2019 at 8:17

cnps

15111 bronze badges

Comments

Subham Chakraborty · Accepted Answer · 2019-07-15 14:15:05Z

0

You can use <input type="file" name="image" (change)="uploadImage($event)" multiple> to take more than one file in input field. In laravel controller make sure to iterate for each file.

answered Jul 15, 2019 at 14:15

Subham Chakraborty

313 bronze badges

Collectives™ on Stack Overflow

How to upload multiple images/files in angular with laravel api?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related