title: trying to append multiple images but got only one from array in angular
body: <p>I am trying to select multiple images, and the images are being selected and stored in the state, but only one image is displayed Below is the code for the same</p>
  <pre><code>**my model in angular**
  
  export class Product {
      public id: string;
      public name: string;        
      public imagePath: string;    
  
      constructor(id: string, name: string, img: string) {
          this.id = id;
          this.name = name;       
          this.imagePath = img;        
      }
  }
  
  
  **My component.html**
  
  
  &lt;div class=&quot;p-field p-col-12 p-md-12&quot;&gt;
              &lt;button mat-stroked-button type=&quot;button&quot; (click)=&quot;productImgPicker.click()&quot;&gt;Pick Image&lt;/button&gt;
              &lt;input type=&quot;file&quot; multiple #productImgPicker (change)=&quot;onImagePickes($event)&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;image-preview&quot; *ngIf=&quot;urls &amp;&amp; newProductForm.get('image').valid&quot; class=&quot;p-field p-col-12 p-md-12&quot;&gt;
              &lt;img *ngFor=&quot;let url of urls&quot; [src]=&quot;url&quot; [alt]=&quot;newProductForm.value.productName&quot;&gt;
          &lt;/div&gt;
  
  
  **my component.ts**
  
  
  onImagePickes(event: Event) {
      const files = (event.target as HTMLInputElement).files;
      if(files) {      
        for(let i=0; i&lt;files.length; i++) {        
          this.newProductForm.patchValue({image: files[i]});
          this.newProductForm.get('image').updateValueAndValidity();
          let reader = new FileReader();
          reader.onload = (event: any) =&gt; {          
            this.urls.push(event.target.result);          
          }
          reader.readAsDataURL(files[i]);
        }
      }    
    }  
  
  onSaveProduct() {
      if(this.newProductForm.invalid) {
        return;
      }
      console.log(this.onImagePickes.length);
      if(this.mode === 'create') {
        this.productService.addProduct(
          this.newProductForm.value.productName,                
          this.newProductForm.value.image,
          this.newProductForm.value
            );
          } else {
            this.productService.updateProduct(
            this.productId,
            this.newProductForm.value.productName,
            this.newProductForm.value.image          
            );
          }
          this.newProductForm.reset();    
    }
  
  
  **my service.ts**
  
  
  addProduct(
          name: string,        
          image: File        
          ) {
          const productData = new FormData();         
          productData.append(&quot;name&quot;, name);              
          productData.append(&quot;image&quot;, image);        
          this.http
          .post&lt;{message: string, prodId: string, prodImg: any, products: string}&gt;('http://localhost:3000/admin/add/product', productData)
          .subscribe((resProductData) =&gt; {
            console.log(resProductData);
            const product: Product = {
              id: resProductData.prodId,
              name: name,
              imagePath: resProductData.prodImg            
            };         
            this.products.push(product);
            this.productUpdated.next([...this.products]);
          });
        }
  </code></pre>
  <p>backend code is working fine with multer I have checked using postman.. if anyone could help, it would be much appreciated. thanks in advance.</p>