Angularjs, ng-flow, base64, javascript technologies

Get a base64 encoded image using ng-flow in AngularJS

Here is an example of how you can get a Base64 encoded image using the ng-flow for the image upload, for instance, if you need to send the image in a JSON request. As you may have noticed, ng-flow returns a file object, however you still can get the Base64 string with the help of HTML5 FileReader:

1
2
3
4
5
6
var base64;
var fileReader = new FileReader();
    fileReader.onload = function (event) {
        base64 = event.target.result;
    };
fileReader.readAsDataURL(flowFile.file);

Here, the base64 variable will contain the Base64 string of the image.

You can try it yourself on CodePen.

Looking to hire a software engineer?
Don't hesitate to contact us.

Comments