title: Proper way to send multipart/form-data using `fetch` or `request`
body: <p>This is the structure of the data I want to send to the server:</p>
  
  <pre><code>{
     attachment: [File],
     foo: String,
     bar: String
  }
  </code></pre>
  
  <p>As you can see, I am trying to send an array of files along with some other data. For storing all this data, I used <code>FormData()</code> constructor provided in the JavaScript official API. I am populating the <code>formData</code> like this:</p>
  
  <pre><code>for (let i = 0; i &lt; this.state.files.length; i++) {
      let f = this.state.files[i];
      this.formData.append('attachment', f, f.name);
  }
  this.formData.append('foo', this.state.foo);
  this.formData.append('bar', this.state.bar);
  </code></pre>
  
  <p>Sidenote: using React, <code>react-dropzone</code> for file upload.
  I am now trying to submit this data to the server. I first tried using the Fetch API like so:</p>
  
  <pre><code>fetch(url, {
      method: method,
      body: data,
      headers: {
        ...authHeader(authToken)
      }
  }
  </code></pre>
  
  <p>Without too much success. Method is <code>POST</code>. <code>authHeader(authToken)</code> just generates <code>Authorization: Bearer ...</code>. Problem was I think that the headers that get specified get overridden by my authentication header.</p>
  
  <p>So I tried using <code>request</code> and <code>request-promise-native</code>. I did something like:</p>
  
  <pre><code>rp({
      url,
      method,
      headers: {
        ...authHeader(authToken)
      },
      formData: data
  });
  </code></pre>
  
  <p>With similar results. What is the proper way to send this kind of data with Authorization Header and an array of Files from <code>FormData</code>?</p>