CODEWITHSUNDEEP
javascriptgoogle-drive-apiinternet-explorer-9blobmxhr
tuxlu
tuxlu

Reputation: 313

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

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:

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...

Upvotes: 3

Views: 12984

Answers (2)

tuxlu
tuxlu

Reputation: 313

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.

Upvotes: 2

Renzo Poddighe
Renzo Poddighe

Reputation: 368

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.

Upvotes: 0

Related Questions