title: How to correctly attach file to formData before POSTing to server?
body: <p>I've been following this <a href="https://robots.thoughtbot.com/ridiculously-simple-ajax-uploads-with-formdata" rel="nofollow noreferrer">FormData tutorial here</a>, however have yet to understand how the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" rel="nofollow noreferrer">formData object</a> works.</p>
  
  <h3>My input form</h3>
  
  <p><a href="https://i.stack.imgur.com/h5Ubz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h5Ubz.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;input type="file" id="file-id" class="w300px rounded4px" name="file" placeholder="PDF file"&gt;
  &lt;button class="btn-upload-pdf" ng-click="asub.uploadPDF()"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <h3>Here is the upload button function:</h3>
  
  <pre><code>this.uploadPDF = () =&gt; {
      const formData = new FormData();
      const fileInput = document.getElementById('file-id');
      const file = fileInput.files[0];
      formData.append('pdf-file', file);
      console.log('formData', formData)
  
      return ApiFactory.insightPDF(formData).then((res) =&gt; {
          console.log('res', res);
          return res;
      });
  };
  </code></pre>
  
  <p>When I log out the <code>fileInput</code> object <code>.files[0]</code> I see the file I just attached:</p>
  
  <p><a href="https://i.stack.imgur.com/jycZN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jycZN.png" alt="enter image description here"></a></p>
  
  <p>It would seem to mean that this object should be enough to send along to the POST. However this is the next step:</p>
  
  <p><code>formData.append('pdf-file', file);</code></p>
  
  <p>I log out <code>formData</code> before I send it into my Factory and this is the result, I don't see the key <code>pdf-file</code> or that PDF anywhere, just a bunch of methods? Where does the file get appended too? How does formData contain the actual PDF?</p>
  
  <p><a href="https://i.stack.imgur.com/oLHZ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oLHZ6.png" alt="enter image description here"></a></p>
  
  <p>I need to attach something from the formData object I presume:</p>
  
  <h3>The Factory that makes the POST request</h3>
  
  <pre><code>const insightPDF = (formData) =&gt; {
      console.log(' formData', formData)
      return $http.post('/app/api/insights_pdf', formData).then((res) =&gt; {
          console.log('PDF uploaded res', res)
          return res;
      }).catch(apiError);
  };
  </code></pre>