title: Unable to send blob payload in FormData
body: <p>I'm playing around with the <code>FormData</code> API. <a href="https://jsfiddle.net/tLqch5x2/2/" rel="nofollow noreferrer">Here</a> is the fiddle I'm using - I'm trying to inject blobs into my form and submit via AJAX.</p>
  <pre><code>//ic0 and tc0 are canvases
  //image0 and thumb0 are file inputs
  function ajaxSubmit(){
      var fd = new FormData(document.forms[0]);
      ic0.toBlob(
          function(blob){
              fd.set(&quot;image0&quot;, blob, &quot;image0.jpg&quot;);
          }, &quot;image/jpeg&quot;, 0.7);
      tc0.toBlob(
          function(blob){
              fd.set(&quot;thumb0&quot;, blob, &quot;thumb0.jpg&quot;);
          }, &quot;image/jpeg&quot;, 0.7);
      var xhr = new XMLHttpRequest();
      xhr.open(&quot;POST&quot;, &quot;/ajax-upload/&quot;, true);
      xhr.send(fd);
  }
  </code></pre>
  <p>Browser behaviour is a little ... odd:</p>
  <h1>Chrome 50 (in Ubuntu)</h1>
  <p>Not able to do it, gives:</p>
  <pre><code>Failed blob:https%3A//fiddle.jshell.net/uuid4 to load resource: the server responded with 404
  </code></pre>
  <p>But I thought <code>FormData.set()</code> was supported now? It seems to work with non-blobs?</p>
  <h1>Firefox 46 (in Ubuntu)</h1>
  <p>Doesn't seem work if <code>FormData()</code> object is not initialized with a  DOM object that already has the necessary file inputs (appended normal inputs are posted however). <code>FormData.set()</code> does not seem to work with file inputs and blobs (you'll note that <code>thumb0</code> is null in the payload despite calling <code>fd.set(&quot;thumb0&quot;, blob, &quot;thumb0.jpg&quot;)</code> on it. You can verify that it's set by doing <code>console.log(fd.get(&quot;thumb0&quot;))</code> just after setting. You'll also note that the payload of <code>image0</code> is incorrectly your original image, not the resized canvas image.</p>
  <hr />
  <p>It's inconvenient not being able to customise your multipart <code>FormData</code> with javascript. I'm a javascript noob - am I just doing something completely wrong here, or are these browsers not correctly supporting the <code>FormData</code> API? How can I submit <code>image0</code> and <code>thumb0</code> correctly in my fiddle?</p>
  <hr />
  <p>Edit: OK, going to bounty this. I know there are big jquery-dependent libraries like blueimp out there, and I think they base64 the data rather than transmitting as a file input (plus I want to avoid jquery). I only have to support the latest Chrome or Firefox for this project and I'm really hoping I can keep the code as clean as the <code>FormData</code> API seems to suggest I might be able to. Can anyone successfully grab an image off a canvas and insert it into the POST payload as a file? I'd like to be able to access it in <code>request.FILES</code> in django.</p>