angularjs - Data not posting in multipart form data in angular and node js(File uploading with angular and node js) -

i fresher using angular js , node js. doing file uploading process angular , node js. create directives , services watching tutorial. in services form data not posting on nodejs server. here following code file file:-

here directive :-

myapp.directive('filemodel', ['$parse', function ($parse) {     return {         restrict: 'a',         link: function(scope, element, attrs) {             var model = $parse(attrs.filemodel);             var modelsetter = model.assign;              element.bind('change', function(){                 scope.$apply(function(){                     modelsetter(scope, element[0].files[0]);                 });             });         }     }; }]); 

here service file code :-

myapp.service('multipartform', ['$http', function($http){     this.post = function(uploadurl, data){         var fd = new formdata();         for(var key in data)             fd.append(key,data[key]);          console.log(fd);         $http({             url: uploadurl,             method: 'post',             headers: { 'content-type': undefined },             transformrequest: angular.identity,             data: json.stringify(fd)         }).         success(function(data) {             console.log('success');         }).         error(function(data, response) {             console.log(response + " " + data);         });     }; }]); 

this angularjs code defined methods :-

var myapp = angular.module('myapp', []);      myapp.controller('savejsondemo',['$http','$scope','multipartform',function($http,$scope,multipartform){          $scope.formdata = {};         $scope.savejson = function() {         var uploadurl = '/savedata';         console.log($scope.formdata);         multipartform.post(uploadurl, $scope.formdata);     };      }]); 

when post data though service node js server, , console.log req.body , rex.files becomes blank. problem in code. here node js server file (app.js)

var express = require('express'); var app = express(); var bodyparser = require('body-parser'); var path = require('path'); var http = require('http'); var fs = require('fs'); var multer = require('multer'); var done       =       false;  // environments app.use(multer({dest: './uploads/'})); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(express.static(path.join(__dirname, 'public')));  app.set('port', process.env.port || 3000);  app.use(function(err, req, res, next){     app.use(bodyparser.urlencoded({extended: true}));     app.use(bodyparser.json({limit: '50mb'}));     console.log(err); });  app.post('/savedata', function(req,res){     console.log('here');     console.log(req.body);     var currenttime = date.now();     /*fs.writefile('./json/'+currenttime+'.json', json.stringify(req.body), function (err) {         if (err) return console.log(err);         else res.send();     }); */ });   http.createserver(app).listen(app.get('port'), function(){   console.log('express server listening on port ' + app.get('port')); }); 

on above /savedata method req coming blank. mistake in code.

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

  <div ng-controller = "myctrl">      <input type = "file" file-model = "myfile"/>      <button ng-click = "uploadfile()">upload me</button>   </div>    <script>      var myapp = angular.module('myapp', []);       myapp.directive('filemodel', ['$parse', function ($parse) {         return {            restrict: 'a',            link: function(scope, element, attrs) {               var model = $parse(attrs.filemodel);               var modelsetter = model.assign;                element.bind('change', function(){                  scope.$apply(function(){                     modelsetter(scope, element[0].files[0]);                  });               });            }         };      }]);       myapp.service('fileupload', ['$http', function ($http) {         this.uploadfiletourl = function(file, uploadurl){            var fd = new formdata();            fd.append('file', file);             $http.post(uploadurl, fd, {               transformrequest: angular.identity,               headers: {'content-type': undefined}            })             .success(function(){            })             .error(function(){            });         }      }]);       myapp.controller('myctrl', ['$scope', 'fileupload', function($scope, fileupload){         $scope.uploadfile = function(){            var file = $scope.myfile;             console.log('file ' );            console.dir(file);             var uploadurl = "/fileupload";            fileupload.uploadfiletourl(file, uploadurl);         };      }]);    </script> 

simply copy paste , change api path in url required angular service calling controller work :)