title: Angular 7 send multiple files to the server
body: <p>I have a question about sending a collection of <code>File</code> from an Angular 7 application to a .NET Core 3 server.</p>
  <p>I have functioning code for sending a single <code>File</code> to the server.  But I have hit a problem when I try to send a collection of <code>File</code> - i.e: <code>File[]</code>.  This is the controller action:</p>
  <pre><code>[HttpPost]
  public async Task&lt;IActionResult&gt; Upload([FromForm(Name = &quot;files&quot;)] List&lt;IFormFile&gt; files)
  {
        // implementation...
  {
  </code></pre>
  <p>I send <code>FormData</code> in line with code I have used to send a single file to the server:</p>
  <pre><code>const formData = new FormData();
  formData.append('files', this.files);
  </code></pre>
  <p>which causes an error with the compiler (see screenshot):</p>
  <p><a href="https://i.stack.imgur.com/ipypQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ipypQ.png" alt="enter image description here" /></a></p>
  <p>The FormData cannot deal with the collection of <code>File[]</code>.</p>
  <p>If I were to change the same code to handle one single File, for example by choosing the first element in the collection, the File is successfully sent to the server.  Like so:</p>
  <pre><code>const formData = new FormData();
  formData.append('files', this.files[0]);
  </code></pre>
  <p>The request is sent like this:</p>
  <pre><code>const httpOptions = {
    headers: new HttpHeaders({ 'Content-Disposition' : 'multipart/form-data' }),
  };
  
    postPhotos(model: FormData): Observable&lt;any | ErrorReportViewModel&gt; {
      return this.http.post('api/Photograph', model, httpOptions)
      .pipe(
        catchError(error =&gt; this.httpErrorHandlerService.handleHttpError(error)));
    }
  </code></pre>
  <p>I have also attempted to send the files in the request body with a model.  This does not work: the server receives a <code>Null</code> collection of <code>IFormFile</code>.  My research suggests that sending FormData is the way to go.  But the FormData seems not to accept the collection of Files.</p>
  <p>How can I send the collection of Files to the server?</p>