title: FormData image upload in JS
body: <p>I can successfully upload an image to the server by using the following form:</p>
  
  <pre><code>&lt;form id="upload_form" action="/upload" enctype="multipart/form-data" method="post"&gt;
    &lt;input name="image_url" type="file"&gt;
    &lt;input id='submit' type="submit" value="Upload"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm trying to do exactly the same thing as above but programatically using the HTML5 FormData() object.</p>
  
  <pre><code>var bts_spritesheet;
  
  handleSpritesheetSelection = function(evt) {
    var f, files, reader;
    files = evt.target.files;
    f = files[0];
    reader = new FileReader();
    reader.onload = (function(theFile) {
      function(e) {
        bts_spritesheet = e.target.result;
      };
    })(f);
    return reader.readAsDataURL(f);
  };
  document.getElementById('upload_spritesheet').addEventListener('change', handleSpritesheetSelection, false);  
  </code></pre>
  
  <p><br>
  The following is called when you user clicks on a submit button:</p>
  
  <pre><code>var formData = new FormData();
  formData.append('bts_spriteSheet', bts_spritesheet);
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  
  xhr.onload = function(e) {
    return console.log('yay its done');
  };
  xhr.send(formData);
  </code></pre>
  
  <p>My html is just:</p>
  
  <pre><code> &lt;input id="upload_spritesheet" type="file"&gt;
  </code></pre>
  
  <p>I've not included or talked about what I'm doing server side because, as I've said, uploading the file using the usual html5 form above works fine so I know it must be my JS code.</p>
  
  <p>Can anyone see why the JS code is producing a 500 servor error, yet the html form version works fine?</p>