POSTing a Blob with FormData via jQuery.ajax

ajax, html, jquery

Solution

I recently encountered this exact problem and have the solution.

The core issue is that the value of `reader.result` passed to `reader.onload` by `readAsBinaryString` is a string, not a blob. Sounds obvious really but I also assumed I was working with a blob. Since String and Blob objects both have a slice method the variable `slice`, whilst set with data that looks like binary data, is still just a string. The String.slice() method works exactly the same as the Blob.slice() method and just ignores the third parameter, which is why you don't notice what's really happening.

According to the FormData spec any value that is not a Blob or File object is converted to a string. It appears that the `slice` string is being truncated at the first non-ASCII character (I'm just guessing as to the exact reason, but the important point is that the string is definitely being truncated when it's appended to `formdata`).

The solution is to convert `reader.result` into a blob first:

reader.onload = function() {
    var blob = new Blob([reader.result]), 
        slice = blob.slice(0,100, {type: "application/octet-stream"});

    var formdata = new FormData();
    formdata.append("blobData", slice);
    formdata.append("blobName", "Photo");

    send(formdata);
}

(The array is a requirement of the Blob constructor).

Now `slice` is a blob, since the Blob.slice() method returns a Blob object, and can be appended to `formdata` without being mangled by string conversion.

Problem

I've seen this question asked many times, but as much as I try, I'm still seeing no results: How can I append a Blob to form data and POST it via jquery? ``` var reader = FileReader(); reader.readAsBinaryString(f); reader.onload = function() { var slice = reader.result.slice(0,100, {type: "application/octet-stream"}); var formdata = new FormData(); formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data formdata.append("blobName", "Photo"); send(formdata); } function send(data) { $.ajax({ url: "/upload", type: "POST", data: data, cache: false, contentType: false, processData: false }); } ``` All the non-blob key/values are in the request, and even the blob's key... but not the blob data. Interestingly, when I post using Firefox instead of Chrome, I get a little bit of data up there.. but not much (this should be up to 2 MB worth of data... it's 7 bytes)

Original source