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

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 patible 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?

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

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

https://developers.google./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 patible 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?

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

• javascript
• google-drive-api
• internet-explorer-9
• blob
• mxhr

• Did you try sending a FormData object containing the blob? – Renzo Poddighe Commented Sep 22, 2015 at 12:34
• oh, I forgot to say that it needs to work on IE 9, sorry... – tuxlu Commented Sep 22, 2015 at 14:57

2 Answers 2

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.

The FormData object works very well but is not patible 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 patible with lower versions of IE.

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