Base64 Image Encoding With Angular2 and Typescript

As part of the upcoming Android application I’ve been working on a web app that can manage content in my Firebase database using Angular. I was recommended to use Angular2 as it will soon be the ‘hot new thing’, unfortunately that means a lack of documentation and stack overflow examples.

One thing that I needed was to store images in base64 encoded strings in Firebase (due to no support for Firebase Storage in AngularFire, but that’s another story). I first started by looking for some sort of plugin but couldn’t find anything that worked with Angular2 so ended up writing the code myself, it’s actually fantastically easy.

It does not require any includes as FileReader is part of the core language. Once the image has been processed it will be placed in the member base64Encoded. You may wish to use some sort of event emitter so you can subscribe for when the encoding is complete.


  1. Hei,
    Thank your for this tutorial / tips.

    Could you please provide this code in an example with Model Driven approach in angular 2 .

    Thanks in advance.

  2. It is throwing this error “Cannot read property ‘result’ of undefined”

Questions? Comments?

© 2024 Acodemics

Theme by Anders NorénUp ↑