'How To Upload Multiple Images In Angular

I have a code for uploading a file to an api .. then api respond with a string url.. then I use that url inside a form group object.
now in my template I need to upload many images > then get each url as a parameter then send them with a json object to api . any one know how to do this please ?
here is my component.ts

let image = product['image'];
let prodImage = new FormData();
    prodImage.append('file', image);
let fileUrl = `**********************`;
      return this.http.post(fileUrl, prodImage, {
        headers: new HttpHeaders().set(
          'Authorization',
          `Bearer ${localStorage.getItem('user-jwt')}`)
      }).subscribe(
        (res: any) => {
          console.log(res.data.url)
          product.image_url = res.data.url;
          this.productsService.createProduct(product).subscribe(
            //sucess
            (response: any) => {}
    )}

there problem is when I need many images

let imageFr = let image = product['imageFr'];
let imageEn = let image = product['imageEn'];
let imageDe = let image = product['imageDe'];

let prodImageFr = new FormData();
prodImageFr.append('file', imageEn);

let prodImageEn = new FormData();
prodImageEn.append('file', imageEn);

let prodImageDe = new FormData();
prodImageDe.append('file', imageDe);

I don't wanna use many http post requests inside each others .. If there is any other clean solution.. Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source