Decode base64 image and upload

Question

I have a webapp that is saving images locally until they are ready to be sent to the server. When I save the images locally, I base64 encode them. Now I want to do a multipart file upload with these images.

So I need to convert the image back into binary form. I've tried using the FileReader to convert it back like this,

var fr = new FileReader();
fr.onloadend = function(binaryImage){
    debugger;
    binaryImage;
};
var base64Str = item.base64Image.substr(item.base64Image.indexOf("base64") + 7);
//var base64Str = item.base64Image;
fr.readAsBinaryString(base64Str);

but the onloadend event is never fired and there are no errors. Once I get the image I wont have trouble uploading it. Any ideas?

Thanks!

Answer 1

Not to familiar with FileReader, but I believe readAsBinaryString is expecting a Blob or File object. Passing it a string causes errors on my end. Try this:

var fr = new FileReader();
fr.onloadend = function(binaryImage){
    debugger;
    binaryImage;
};
var blob = new Blob([item.base64Image.
                          substr(item.base64Image.indexOf("base64") + 7)]);
fr.readAsBinaryString(blob);

I don't think this will give you want though. Check out this article for ways to encode/decode Base64: How can you encode to Base64 using Javascript?

Looks like you can use btoa() and atob() for web kit browsers.