title: npm Formidable Upload, use with JS FormData on client
body: <p>
  I wanna send a file to the server with FormData by drag and drop, and save it to disk with <a href="https://github.com/felixge/node-formidable" rel="nofollow">Formidable</a> in node.</p>
  
  <p>I used this code to send the file: <a href="https://github.com/felixge/node-formidable#example" rel="nofollow">https://github.com/felixge/node-formidable#example</a></p>
  
  <p>and it works, my server saves the data, but I can't send it via js <code>FormData</code>. I wrote this code, but it doesn't parse the received data as files, and shows them like fields. The code is describe this better:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Client code
  //inside drop event so i have files:
  
  files = event.dataTransfer.files;
  file = files[0];
  
  reader = new FileReader();
  
  reader.readAsArrayBuffer(file);
  
  reader.onload = function(evt) {
      var data, fd;
      data = evt.target.result; // it's real binary data on log
      fd = new FormData;
      fd.append("foo", "bar");
      fd.append("upload", data);
      uploadImage(fd);
  }
  
  uploadImage = function(data) {
      xmlHttp.overrideMimeType("multipart/form-data");
      xmlHttp.open('post', '/upload');
      xmlHttp.send(data);
  }
  </code></pre>
  
  <p>It works and sends the data to the server, but <code>formidable</code>'s parse method logs like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>fields: {foo: 'bar', upload=''}
  files: {}
  </code></pre>