title: JavaScript Blob Upload with FormData
body: <p>I am having a problem uploading a blob created in javascript to my server. The basic idea is that a user uploads an image and in javascript I center crop the image and downsample it before transmission.</p>
  
  <p>The image manipulation is working fine, but the upload itself is not working right. Here is the code that does the upload and conversion from canvas to blob</p>
  
  <pre><code>function uploadCanvasData()
  {
      var canvas = $('#ImageDisplay').get(0);
      var dataUrl = canvas.toDataURL("image/jpeg");
  
      var blob = dataURItoBlob(dataUrl);
  
      var formData = new FormData();
      formData.append("file", formData);
  
      var request = new XMLHttpRequest();
      request.onload = completeRequest;
  
      request.open("POST", "IdentifyFood");
      request.send(formData);
  }
  
  function dataURItoBlob(dataURI)
  {
      var byteString = atob(dataURI.split(',')[1]);
  
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i &lt; byteString.length; i++)
      {
          ia[i] = byteString.charCodeAt(i);
      }
  
      var bb = new Blob([ab], { "type": mimeString });
      return bb;
  }
  </code></pre>
  
  <p>The server claims that no files were uploaded, and when I use chrome to examine the request, I see the request payload as:</p>
  
  <pre><code>------WebKitFormBoundaryyzYbm61DKgS09tpB
  Content-Disposition: form-data; name="file"
  
  [object FormData]
  ------WebKitFormBoundaryyzYbm61DKgS09tpB--
  </code></pre>
  
  <p>In contrast to the payload of a form being submitted with <code>input type="file"</code></p>
  
  <pre><code>------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
  Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
  Content-Type: image/jpeg
  
  
  ------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--
  </code></pre>
  
  <p>So it looks to me like the XMLHttpRequest is just uploading the result of calling <code>blob.toString()</code></p>
  
  <p>Does anyone know what I am doing wrong here? Is there a better approach I should be using?</p>