How to convert image files into base64 format - ng-flow

Friday, October 30, 2015


Flow.js html5 file upload extension on angular.js framework 
The images are encoded into base64 format using the angularjs code below
HTML code
<div flow-init flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message" flow-files-added="processFiles($files)" flow-name="obj.flow">
    <!-- <input type="file" flow-btn/> -->
    Input OR Other element as upload button
    <span class="btn" flow-btn>Add File</span>
    <div>
        <div ng-repeat="file in $flow.files" class="gallery-box ng-scope">
            <span class="title ng-binding">{{file.name}}</span>
            <div class="thumbnail" ng-show="$flow.files.length">
                <img flow-img="file" src="file.image">
            </div>
            <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}" style="width: 100%;">
                    <span class="sr-only ng-binding">1% Complete</span>
                </div>
            </div>
            <div class="btn-group">
                <a class="btn btn-xs btn-danger" ng-click="file.cancel()">
      Remove
    </a>
            </div>
        </div>
        <button type="button" ng-click="uploadFiles($flow)">Submit</button>
    </div>
</div>
In the controller file add the following
$scope.fileArray = [];
$scope.imgContent = {};
$scope.imageStrings = [];


$scope.processFiles = function(files) {

    angular.forEach(files, function(flowFile, i) {
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
            var uri = event.target.result;
            $scope.imageStrings[i] = uri;
            $scope.imgContent = {
                fileName: flowFile.name,
                fileContent: uri
            };
        };
        fileReader.readAsDataURL(flowFile.file);

        $scope.fileArray.push($scope.imgContent);
    });

    console.log(JSON.stringify($scope.fileArray));
};
and decode the base64 format into image using the server side language like java, php etc.

You Might Also Like

0 comments