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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
export class base64-encode-example implements OnInit { private fileReader: FileReader; private base64Encoded: string; constructor() { this.fileReader.onload = (file) => { this.base64Encoded = this.fileReader.result; console.log("Encoded file!"); } } encodeFile(file : File) { this.fileReader.readAsDataURL(f); } } |
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.
December 7, 2016 at 7:32 pm
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.
February 3, 2017 at 2:16 pm
It is throwing this error “Cannot read property ‘result’ of undefined”
May 11, 2017 at 1:32 pm
this doesnt work