title: fetch - Missing boundary in multipart/form-data POST
body: <p>I want to send a <code>new FormData()</code> as the <code>body</code> of a <code>POST</code> request using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow noreferrer">fetch api</a></p>
  <p>The operation looks something like this:</p>
  <pre class="lang-js prettyprint-override"><code>var formData = new FormData()
  formData.append('myfile', file, 'someFileName.csv')
  
  fetch('https://api.myapp.com', 
    {
      method: 'POST',
      headers: {
        &quot;Content-Type&quot;: &quot;multipart/form-data&quot;
      },
      body: formData
    }
  )
  </code></pre>
  <p>The problem here is that the boundary, something like</p>
  <pre class="lang-none prettyprint-override"><code>boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
  </code></pre>
  <p>never makes it into the <code>Content-Type:</code> header</p>
  <p>It should look like this:</p>
  <pre class="lang-none prettyprint-override"><code>Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
  </code></pre>
  <p>When you try the &quot;same&quot; operation with a <code>new XMLHttpRequest()</code>, like so:</p>
  <pre class="lang-js prettyprint-override"><code>var request = new XMLHttpRequest()
  request.open(&quot;POST&quot;, &quot;https://api.mything.com&quot;)
  request.withCredentials = true
  request.send(formData)
  </code></pre>
  <p>the headers are correctly set</p>
  <pre class="lang-none prettyprint-override"><code>Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
  </code></pre>
  <p>So my questions are:</p>
  <ol>
  <li>how do I make <code>fetch</code> behave exactly like <code>XMLHttpRequest</code> in this situation?</li>
  <li>if this is not possible, why?</li>
  </ol>
  <p>Thanks everybody! This community is more or less the reason I have professional success.</p>