I am using angularJS's ng-flow to upload a img in my app. the prob is that I successfully upload the file flow and I am not able to send the file to node.js and save it to mongoDb.
Code (FrontEnd)(HTML):
<div class="circle-photo-container" flow-init="saveImage($flow)" flow-files-submitted="saveImage($flow)" flow-file-success="saveImage($flow)" flow-attrs="{accept:'image/*'}">
<div class="photo-container" >
<div ng-hide="$flow.files.length" class="circle-photo">
<div class="content">
</div>
</div>
<img ng-show="$flow.files.length" flow-img="$flow.files[0]" width="100" height="100" style="margin-left: 37%">
</div>
<div class="photo-upload-container" flow-btn>
<i ng-hide="$flow.files.length" class="fa fa-2x fa-camera upload-button"></i>
</div>
</div>
JS:
$scope.saveImage = function(flow){
console.log('hello')
if(flow){
var abc = !!{png:1,gif:1,jpg:1,jpeg:1}[flow.files[0].getExtension()]
if(abc == true){
$scope.groupData.picURL = flow.files[0];
$scope.img = flow.files.length;
}else{
flow.cancel()
}
}
}
I have file object in flow.files[0] and $scope.groupData.picURL. Now can I make a POST request to the server and then save it to mongoDB. Please help with the example Code
The problem is that your not actually reading the file at all, you're just retrieving the file object. You will need to use the FileReader object to read the data, so that it can be passed to the server. I've set up a function which returns the FileReader object which will get the resulting data from the image. You can call that function from within your existing save function.
var getFileReader = function( $scope ) {
var fileReader = new FileReader();
fileReader.onloadend = function() {
$scope.img = fileReader.result;
}
return fileReader;
};
And then within your function call:
$scope.saveImage = function(flow){
if(flow){
var abc = !!{png:1,gif:1,jpg:1,jpeg:1}[flow.files[0].getExtension()]
if(abc == true){
var fileReader = getFileReader( $scope ),
file = flow.files[0];
fileReader.readAsDataURL(file);
$scope.$apply();
}else{
flow.cancel()
}
}
}