title: jQuery.ajax emulating POST file upload, not sending UTF-8 content
body: <p><em>Before I start: This is a 100% client-side question.  Forget the server side language, how I handle the uploads, etc -- I'm comparing a known working HTTP file upload request with a jQuery-generated AJAX request that theoretically should be doing the same thing.</em></p>
  
  <p>Background: I'm writing a file upload plugin for tinyMCE.  Part of this involves allowing drag-and-drop image uploading for browsers that support it -- specifically, tinyMCE in firefox creates an img with a base64 src when a filesystem image is dropped into the tinyMCE editor.  That's my current use case, it may be expanded later.</p>
  
  <p>My goal is to take the base64 data and use jQuery to emulate a form submission to upload it to the server.  I already have a normal HTML form-based approach that is working.</p>
  
  <p>Getting the base64 data is cake:</p>
  
  <pre><code>$('img[src^="data:"]', ed.getDoc()).each(function(){
      var data = /data:(image\/\w+);base64,(.*)/gmi.exec(this.src), format, ext;
      if (data){
          format = data[1];
          ext = format.split('/')[1];
          data = atob(data[2]);
      }
      else{
          // blah, not supported
      }
  });
  </code></pre>
  
  <p>Prepping the POST data similarly easy:</p>
  
  <pre><code>var boundary = '--------------------boundary' + (new Date).getTime();
  data = '\r\n' + boundary + '\r\n' +
          'Content-Disposition: form-data; name="file-upload"; filename="uploaded_image.' + ext + '"\r\n' +
          'Content-Type: ' + format + '\r\n\r\n' +
          data + '\r\n' +
          boundary + '--'
          ;
  </code></pre>
  
  <p>All that's left is to send it off to the server:</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      url: '/upload/',
      contentType: 'multipart/form-data; boundary=' + boundary.slice(2),
      data: data
  });
  </code></pre>
  
  <p>The server handles the POST "correctly" (it sees the file and saves it to disk just fine), but the resulting image is quite corrupted -- it won't display in a browser, and its <a href="http://www.fastgraph.com/help/jpeg_header_format.html" rel="nofollow">jpeg header</a> is completely wrong, not to mention it's about 33% larger than it is locally (12K on the server vs 9K local).</p>
  
  <p>Using Firebug's Net tab, nothing looks wrong -- in fact, apart from an extra <code>charset=UTF-8</code> in the Content-Type request header and the lack of pretty-printing POST data, this AJAX request looks <em>exactly</em> like the corresponding form POST.  Using <a href="https://addons.mozilla.org/en-us/firefox/addon/httpfox/" rel="nofollow">HttpFox</a>, though, tells a different story:</p>
  
  <p>form upload:</p>
  
  <pre><code>-----------------------------191891488320550623041315726177
  Content-Disposition: form-data; name="file-upload"; filename="file.jpg"
  Content-Type: image/jpeg
  
  ÿØÿàJFIFHHÿÛC...
  </code></pre>
  
  <p>ajax upload:</p>
  
  <pre><code>--------------------boundary1375846064929
  Content-Disposition: form-data; name="file-upload"; filename="file.jpeg"
  Content-Type: image/jpeg
  
  Ã¿ÃÃ¿Ã JFIFHHÃ¿ÃC...
  </code></pre>
  
  <p>I also notice that the request Content-Length values are different, again by about 33%.  So it seems that, for whatever reason, jQuery-generated POST requests don't actually get sent in UTF-8?  What am I missing, what's the final piece of this puzzle?</p>