AngularJS Tutorial - Posting Multipart Form data to Server

Author: BrentAureli

.gitignore

@@ -45,3 +45,4 @@ Temporary Items
 # Dependency directory
 node_modules
 Public/libs
+uploads

Public/js/controllers/submitController.js

@@ -1,4 +1,7 @@
-myApp.controller('submitController', ['$scope', function($scope){
-	
-
+myApp.controller('submitController', ['$scope', 'multipartForm', function($scope, multipartForm){
+	$scope.customer = {};
+	$scope.Submit = function(){
+		var uploadUrl = '/upload';
+		multipartForm.post(uploadUrl, $scope.customer);
+	}
 }]);

Public/js/directives/fileModel.js

@@ -0,0 +1,15 @@
+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]);
+				})
+			})
+		}
+	}
+}])

Public/js/services/multipartForm.js

@@ -0,0 +1,11 @@
+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]);
+		$http.post(uploadUrl, fd, {
+			transformRequest: angular.indentity,
+			headers: { 'Content-Type': undefined }
+		});
+	}
+}])

Public/partials/submit.html

@@ -1 +1,17 @@
-Submit Page.
+<form>
+  <div class="form-group">
+    <label for="name">Full Name</label>
+    <input type="text" class="form-control" id="name" placeholder="Enter name" ng-model="customer.name">
+  </div>
+  <div class="form-group">
+    <label for="email">Email address</label>
+    <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="customer.email">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">Avatar</label>
+    <input type="file" id="exampleInputFile" file-model="customer.file">
+  </div>
+  <button type="submit" class="btn btn-default" ng-click="Submit()">Submit</button>
+</form>
+
+{{customer}}

app/routes/secure.js

@@ -29,6 +29,12 @@ module.exports = function(router){
 		});
 	});
 
+	router.post('/upload', function(req, res){
+		console.log(req.body);
+		console.log(req.files);
+		res.json({success: true});
+	});
+
 	router.get('/*', function(req, res){
 		res.redirect('/home');
 	});

package.json

@@ -15,6 +15,7 @@
     "express-session": "^1.11.1",
     "mongoose": "^4.0.1",
     "morgan": "^1.5.2",
+    "multer": "^0.1.8",
     "passport": "^0.2.1",
     "passport-facebook": "^2.0.0",
     "passport-google-oauth": "^0.2.0",

server.js

@@ -11,6 +11,7 @@ var session = require('express-session');
 var morgan = require('morgan');
 var mongoose = require('mongoose');
 var bodyParser = require('body-parser');
+var multer = require('multer');
 var passport = require('passport');
 var flash = require('connect-flash');
 var MongoStore = require('connect-mongo')(session);
@@ -21,7 +22,7 @@ mongoose.connect(configDB.url);
 require('./config/passport')(passport);
 
 app.use(express.static(__dirname + '/public'));
-
+app.use(multer({dest: './uploads/'}));
 app.use(morgan('dev'));
 app.use(cookieParser());
 app.use(bodyParser.urlencoded({extended: false}));