title: HTML5 FormData sending empty objects via JQuery
body: <p>I have a basic script that is as follows: </p>
  
  <pre><code>$(".submit").click(function(){
      var fd = new FormData();
      fd.append('username', 'Bob');
  
      $.ajax({
       url: '/signup',
       type: 'post',
       data: fd,
       processData: false,
       contentType: false,
       success: function (data) {
           console.log("Success: ", data);
       }
    });
  });
  </code></pre>
  
  <p>When the request hits my server, I receive a req.body of  <code>{}</code> (empty) and there is nothing in req that points to data being sent. Whats going on here? How can I send data with FormData?</p>
  
  <p>I wanted to test getting basic preset data from FormData and was unsuccessful. The values console logged in Chrome show an empty formData object, with only its constructor and the available 'append' method.</p>
  
  <p>I am using jQuery v 2.1.4 and HTML5 and have confirmed that window.FormData is a valid object in Google Chrome.</p>
  
  <p>My goal is to have a form that a user can enter an email, password, avatar, and a profile background image with the following form:</p>
  
  <pre><code>&lt;form id="msform" enctype="multipart/form-data" name="msform"&gt;
    &lt;!-- Progress Bar --&gt;
    &lt;ul id="progressbar"&gt;
      &lt;li class="active"&gt;Basic Information&lt;/li&gt;
      &lt;li&gt;Profile Customization&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- Step One --&gt;
    &lt;fieldset&gt;
      &lt;h2 class="title"&gt;Basic Information&lt;/h2&gt;
  
      &lt;input type="text" name="username" placeholder="Username" /&gt;
      &lt;input type="text" name="password" placeholder="Password" /&gt;
      Avatar Image &lt;input type='file' id='avatarImage' accept="image/*" name='avatarImage'&gt;
      &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
    &lt;/fieldset&gt;
  
    &lt;!-- Step Two --&gt;
    &lt;fieldset&gt;
      &lt;h2 class="title"&gt;Profile Customization&lt;/h2&gt;
  
      &lt;select id="dropdown" name="profileColor"&gt;
        &lt;option value="red"&gt;Red&lt;/option&gt;
        &lt;option value="blue"&gt;Blue&lt;/option&gt;
        &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
      &lt;/select&gt;
  
      Background Photo &lt;input type='file' id='bgPhoto' accept="image/*" name='bgPhoto'&gt; &lt;/div&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;input type="submit" name="submit" class="submit action-button" value="Submit" /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Whats going on with FormData, it seems like a valid object, but I'm unable to append anything to it. I've looked, and it appears that others have seen an empty object in their console, but the data 'automagically(?)' appears on their server? My first code block is basically a copy for the docs and I'm having trouble with it. Would and CORS issues or CDN errors be the case? Something maybe not able to access as it should? No errors print in the log, only a blank object on my post request.</p>
  
  <p>Thanks for the help!</p>