How to assign a photo taken from the camera to enter the file type in angularjs?

Question

I need to take a picture from a mobile camera and transfer it to the web api. I used the ng-cordova plugin for shooting through the camera. Now I want to send this photo to the web api inside request.files. I wrote this code to achieve my stated goal. But I get the file in request.body Correct me, what I did wrong

Here is my code

html file:

<ion-view ng-controller="CameraCtrl as cm"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> <ion-content class="has-header padding"> <form> <div id="uploaddesigndiv" class="list card"> <div class="item"> <div class="fileUpload"> <button class="button button-assertive" ng-click="cm.takePicture()">Take Picture from Camera</button> </div> <img id="Selectedimage" alt="Not an image" ng-show="cm.imgSrc !== undefined" ng-src="{{cm.imgSrc}}"> </div> <div class="item item-body" id="uploadtags"> <ion-list> <ion-item class="item-stable" ng-click="toggleGroup(2)" ng-class="{active: isGroupShown(2)}"> Tags <i class="icon togglemore" ng-class="isGroupShown(2) ? 'ion-chevron-up' : 'ion-chevron-down'"></i> </ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(2)" ng-repeat="tag in tagList"> {{tag.name}} <input ng-model="tag.check" type="checkbox" ng-disabled="tag.disable"> </ion-item> </ion-list> <textarea ng-model="form.form.desc" class="item-input" placeholder="description" rows="5"></textarea> <input ng-click="upload()" type="submit" class="button button-assertive" name="upload" value="Upload"> </div> </div> </form> <div class="space"></div> </ion-content> </ion-view> 

controller code:

 (function () { 'use strict'; app.controller('CameraCtrl', ['$cordovaCamera', '$scope','$rootScope','$http', CameraCtr]); function CameraCtr($cordovaCamera, $scope,$rootScope,$http) { var vm = this; vm.takePicture = function () { var options = { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 300, targetHeight: 300, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function (imageData) { // Success! Image data is here vm.imgSrc = "data:image/jpeg;base64," + imageData; }, function (err) { alert("An error occured: " + err); }); }; $scope.form={}; $scope.tagList=[{name:"Common",check:true,disable:true}]; var ogList=["Hand Design", "Feet Design","Indian","Pakistani","Moghlai","Arabic","Indo-Arabic","Bridal"]; for(var i=0;i<ogList.length;i++) { $scope.tagList.push({name:ogList[i],check:false}); } var _upload = function (photo) { alert("photo " , photo); var tagName=[]; for(var i=0;i<$scope.tagList.length;i++) { if($scope.tagList[i].check) tagName.push($scope.tagList[i].name); } console.log("$scope.tagList : ",$scope.tagList); console.log("tagName : ",tagName); var formData = new FormData(); console.log("userID"+$rootScope.sessionMyID); formData.append("userPhoto", photo); formData.append("userID", $rootScope.sessionMyID); formData.append("desc", $scope.form.form.desc); formData.append("tagName", tagName); //service call return $http.post('http://192.168.2.135:3000/api/photo', formData, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }).then(function (response) { alert("Your image uploaded Successfully..."); return response; }); }; $scope.upload = function () { console.log("$scope.fileUpload", $scope.fileUpload); _upload(vm.imgSrc); }; }; })(); 

on the server side, this is the request object that I receive

 body: { userPhoto: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADhASwDASIAAhEBAxEB/8QAHw................./2Q==', userID: '55041c5ec20ec607edaf7729', desc: 'Ghhhj', tagName: 'Common' }, files: {}, read: [Function], route: { path: '/photo', stack: [ [Object] ], methods: { post: true } } } jpeg; base64, / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL / wAARCADhASwDASIAAhEBAxEB / 8QAHw ................. / 2Q ==', body: { userPhoto: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADhASwDASIAAhEBAxEB/8QAHw................./2Q==', userID: '55041c5ec20ec607edaf7729', desc: 'Ghhhj', tagName: 'Common' }, files: {}, read: [Function], route: { path: '/photo', stack: [ [Object] ], methods: { post: true } } }