What encoding is used for multipart/form-data and is it possible to encode data using JQuery?

Question

I actually want to send a picture to my server using jQuery without using html form. But I would like to retrieve the same data as I received with an html form with the encode type:

multipart/form-data

I used HTML5 FileReader : http://www.html5rocks.com/en/tutorials/file/dndfiles/

but when I use FileReader.readAsText(Blob|File, opt_encoding) function. The data I retrieved are not encoded as the same as it's encoded with the html form.

What encoding is used for "multipart/form-data" and is it possible to encode data using jquery or javascript before send them to my server?

//edit

from w3schools : http://www.w3schools.com/html5/att_form_enctype.asp

multipart/form-data ==> No characters are encoded. This value is required when you are using forms that have a file upload control

the problem that I have is that when I retrieve the data from FileReader it's not the same data that from HTML form data.

for the same picture: with html form :

\xff\xd8\xff\xe1\x00\x18Exif\x00\x00II*\x00\x08\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\xff\xec\x00\x11Ducky\x00\x01\x00\x04\x00\x00\x00U\x00\x00\xff\xe1\x03)http://ns.adobe.com/xap/1.0/\x00<?xpacket begin="\xef\xbb\xbf" id="W5M0MpCehiHzreSzNTczkc9d"?>...

with FileReader.readAsText():

\xc3\xbf\xc3\x98\xc3\xbf\xc3\xa1\\u0000\\u0018Exif\\u0000\\u0000II*\\u0000\\b\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\\u0000\xc3\xbf\xc3\xac\\u0000\\u0011Ducky\\u0000\\u0001\\u0000\\u0004\\u0000\\u0000\\u0000U\\u0000\\u0000\xc3\xbf\xc3\xa1\\u0003)http://ns.adobe.com/xap/1.0/\\u0000<?xpacket begin=\\"\xc3\xaf\xc2\xbb\xc2\xbf\\" id=\\"W5M0MpCehiHzreSzNTczkc9d\\"?>

How to retrieve the same data?

Answer 1

You should use FileReader.readAsBinaryString to get the file contents of a non-text file.

Also when you attempt to send the data it will be encoded, to prevent this you can use XMLHttpRequest.sendAsBinary , its nonstandard and only available in Gecko(firefox). Here is a polyfill for it using Uint8Array

if (!XMLHttpRequest.prototype.sendAsBinary){
    XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
        function byteValue(x) {
            return x.charCodeAt(0) & 0xff;
        }
        var ords = Array.prototype.map.call(datastr, byteValue);
        var ui8a = new Uint8Array(ords);
        this.send(ui8a.buffer);
    }
}

Ofcourse this is all trivial since the browsers that support the File Api and Uint8Array also support FormData

Answer 2

Ok I actually found the answer while testing a lot of solutions and the one I found was a bit weird.

Actually, I sent the data to my server as Base64 format using the function FileReader.readAsDataURL() .

Then, I split(',') the data to only get the Base64 data in my server side I decoded the data using my_base64_data_decoded = base64.b64decode(my_base64_data_encoded)

At first I sent these data to Amazon using "boto" and serialize the data using: cStringIO.StringIO(my_base64_data_decoded) and It didn't work.

I created a dictionary my_dict :

and I did my_dict['data'] = base64.b64decode(my_base64_data_encoded)

and then : cStringIO.StringIO(my_dict['data']) and it worked.

Now my question is What process has been done to the data while inserting in the dictionary?

But at least, I found the answer.