title: Uploading multiple files with Fetch and FormData APIs
body: <p>I'm trying to use the native <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="noreferrer">Fetch</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" rel="noreferrer">FormData</a> APIs to upload multiple files at once to the server but I can't for the life of me get it to work. Here's what I've got:</p>
  
  <pre><code>// acceptedFiles are File objects coming from `react-dropzone`.
  function handleSubmit(acceptedFiles) {
    const data = new FormData();
  
    for (const file of acceptedFiles) {
      data.append('files', file, file.name);
    }
  
    return fetch('https://example.com/api/upload', {
      method: 'POST',
      body: data,      
    });
  }
  </code></pre>
  
  <p>But what my Rails server receives is this:</p>
  
  <pre><code>Parameters: {"files"=&gt;#
  &lt;ActionDispatch::Http::UploadedFile:0x00007feb347becc0 @tempfile=#
  &lt;Tempfile:/var/folders/kl/y1jrp7zs55sbx075jjjl3p280000gn/T/RackMultipart201
  71112-6486-1ftkufy.mp4&gt;, @original_filename="SampleVideo_1280x720_5mb.mp4",
   @content_type="video/mp4", @headers="Content-Disposition: form-data; 
  name=\"files\"; filename=\"SampleVideo_1280x720_5mb.mp4\"\r\nContent-Type:
   video/mp4\r\n"&gt;}
  </code></pre>
  
  <p>In other words, it looks like <code>files</code> is actually just one file. But the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#example" rel="noreferrer">docs for <code>FormData</code> say that append should append multiple files</a>. </p>
  
  <p>So what's going wrong?</p>