How to send an http multipart POST request with a Blob in it?

Question

I am using multipart XMLHttpRequest to upload files on a Google Drive account, using the syntax described in google's documentation:

https://developers.google.com/drive/web/manage-uploads#multipart

Here is an simplified example of the request's body.

--delim
Content-Type: application/json; charset=UTF-8

*metadata Json object*

--delim
Content-Type: *datatype*

*data*
--delim--

My problem is:

• I'm using JavaScript
• I have to send the data as a Blob
• I can't use Google's JavaScript API
• It must be compatible with Internet Explorer (at least 9).

As you can see, the request consists of 2 strings, with a blob right in between.
But, if I do a concatenation like "a-" + blob + "-b", I of course get the string "a-[object Blob]-b"

So, how can I send a request that contains my blob, and the metadata?

PS: I know that I can send the data alone, and then edit the metadata, but it takes two requests,
one too much...

Answer 1

I found the answer, I had to encode in Base 64 the content of my Blob:

var reader = new FileReader
reader.readAsDataURL(blob)
var data = reader.result;
//don't need type informations
data = data.split(",").pop();

and just after the "Content-Type" value in the second part of the request, I added this line:

'Content-Transfer-Encoding: base64'

and now it works!

and don't worry, in my code I used my FileReader in an asynchronous way, I just simplified here for brevity.

Answer 2

The FormData object works very well but is not compatible with IE < 10.

For IE versions 9 and below, a different solution is needed. This question 's top answer suggests using jQuery Form Plugin as an alternative that is compatible with lower versions of IE.

Upon further inspection, the plugin appears to emulate FormData objects for all non-compliant browsers. The standalone solution for this can be found here .