Sebastian Sandqvist Sebastian Sandqvist - 1 month ago 51
Javascript Question

Save base64 encoded image to Firebase Storage

Using firebase 3.0.x, is it possible to save a base64 encoded image to the new Firebase Storage service?

I am using canvas to resize images in the browser prior to uploading them, and output them as a base64 jpeg. I know that the Storage api can accept Blobs, but IE9 support is needed for my current project.

Answer

The latest version of the Firebase SDK supports base64 image uploads. Simply use the putString method from Firebase Storage.

https://firebase.google.com/docs/reference/js/firebase.storage

One small caveat is that sometimes you'll have a base64 String with unnecessary whitespace. For example, I've found that the cordova Camera plugin returns base64 with unnecessary whitespace. The Storage SDK will fail to upload this because JavaScript can't perform it's native atob function - something the Firebase JS does under the hood. You'll have to strip the whitespace - see DOM Exception 5 INVALID CHARACTER error on valid base64 image string in javascript