Get a base64 encoded image using ng-flow in AngularJS

ava-s-alexey-zvegintcev

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:

var base64;
var fileReader = new FileReader();
    fileReader.onload = function (event) {
        base64 = event.target.result;
    };
fileReader.readAsDataURL(flowFile.file);Code language: JavaScript (javascript)

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

You can try it yourself on CodePen.

ava-s-alexey-zvegintcev
Lead JavaScript Developer