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.
