Get Base64 encode file-data from Input Form

It’s entirely possible in browser-side javascript.

The easy way:

The readAsDataURL() method might already encode it as base64 for you. You’ll probably need to strip out the beginning stuff (up to the first ,), but that’s no biggie. This would take all the fun out though.

The hard way:

If you want to try it the hard way (or it doesn’t work), look at readAsArrayBuffer(). This will give you a Uint8Array and you can use the method specified. This is probably only useful if you want to mess with the data itself, such as manipulating image data or doing other voodoo magic before you upload.

There are two methods:

• Convert to string and use the built-in btoa or similar
  • I haven’t tested all cases, but works for me- just get the char-codes
• Convert directly from a Uint8Array to base64

I recently implemented tar in the browser. As part of that process, I made my own direct Uint8Array->base64 implementation. I don’t think you’ll need that, but it’s here if you want to take a look; it’s pretty neat.

What I do now:

The code for converting to string from a Uint8Array is pretty simple (where buf is a Uint8Array):

function uint8ToString(buf) {
    var i, length, out="";
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

From there, just do:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 will now be a base64-encoded string, and it should upload just peachy. Try this if you want to double check before pushing:

window.open("data:application/octet-stream;base64," + base64);

This will download it as a file.

Other info:

To get the data as a Uint8Array, look at the MDN docs:

• https://developer.mozilla.org/en/DOM/FileReader