title: Send multiple files with HttpClient
body: <p>I've got code that successfully sends images to server:</p>
  
  <p>.ts</p>
  
  <pre><code>  onFileSelected(event){
      let files = event.target.files;
      const fd = new FormData();
      for (let i = 0; i &lt; files.length; i++) {
        let file = files[i];
        fd.append("media",files[i],files[i].name);
      }
      this.httpClient.post("backend/upload.php",fd, {reportProgress:true,observe:"events"}).subscribe((event)=&gt;{
        console.log(event);
      });
    }
  </code></pre>
  
  <p>This is the output inspected in networks tab that confirms that.</p>
  
  <pre><code>------WebKitFormBoundarymwsBJvYMYfzWyk4X
  Content-Disposition: form-data; name="media"; filename="DSC_0905_2.png"
  Content-Type: image/png
  
  
  ------WebKitFormBoundarymwsBJvYMYfzWyk4X
  Content-Disposition: form-data; name="media"; filename="DSC_0905.JPG"
  Content-Type: image/jpeg
  
  
  ------WebKitFormBoundarymwsBJvYMYfzWyk4X--
  </code></pre>
  
  <p>The problem is, that all the images have the same name, which is used to identify them, and therefore I can only access the first one that was uploaded.</p>
  
  <p>For example</p>
  
  <p>.php
  ...</p>
  
  <pre><code>$_FILES["media"] // do something with it
  </code></pre>
  
  <p>...</p>
  
  <p>only access one image.</p>
  
  <p>What do you propose I do differently so that I will be able to access all of them? The number of images that can be sent is flexible.</p>