title: Multiple File Upload Using Angular 4
body: <p>I am facing issue with multiple files upload using Angular 4.</p>
  
  <p>Here I am trying to append the multiple files in getFileDetails() but only file is selecting and if I choose another file it is getting replaced with the new file but <strong>actual expectation</strong> is they need to append each other and using post method I need to pass the json.</p>
  
  <p>app.component.html:</p>
  
  <pre><code>    &lt;div&gt;
        &lt;h1&gt;{{title}}!&lt;/h1&gt;
      &lt;ng-container&gt;
            &lt;input type="file" id="file" multiple (change)="getFileDetails($event)"&gt;
             &lt;button (click)="uploadFiles()"&gt;Upload&lt;/button&gt;
        &lt;/ng-container&gt;
      &lt;/div
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { HttpErrorResponse } from '@angular/common/http/src/response';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Upload Multiple Files in Angular 4';
  
    constructor (private httpService: HttpClient) {  }
  
  
    ngOnInit () {  }
    myFiles:string [] = [];
    sMsg:string = '';
  
    getFileDetails (e) {
      //console.log (e.target.files);
      for (var i = 0; i &lt; e.target.files.length; i++) { 
        this.myFiles.push(e.target.files[i]);
      }
    }
  
    uploadFiles () {
      const frmData = new FormData();
  
      for (var i = 0; i &lt; this.myFiles.length; i++) { 
        frmData.append("fileUpload", this.myFiles[i]);
      }
  
      this.httpService.post('url', frmData).subscribe(
        data =&gt; {
          // SHOW A MESSAGE RECEIVED FROM THE WEB API.
          this.sMsg = data as string;
          console.log (this.sMsg);
        },
        (err: HttpErrorResponse) =&gt; {
          console.log (err.message);    // SHOW ERRORS IF ANY.
        }
      );
    }
  }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Expected json:</p>
  
  <pre><code>[{
     "attachmentName": "content-infographic.txt",
     "attachedFile": ""
  },
  {
    "attachmentName": "infographic.png",
     "attachedFile": ""
  }]
  </code></pre>
  
  <p>How can I correct the code to fix the issue?</p>