Simple file upload example using Angularjs

Cover image

Hi. In this tutorial we will create an AngularJS web app that will upload the user selected file to server using nodejs. To achieve this we will use the multer node module.

Installation

Open Command Prompt and navigate to the downloaded directory simple-file-uploader

Run the following command

node .

Project Structure

The web application code is mainly separated into 2 parts (Client and Server)

public –index.html : The starting point for our application front end (Client) –server.js: File upload and save (Server) code index.html (The starting point for our application front end)

<html ng-app="myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">Upload File</button>
</div>
</html>
<script src="angular.min.js"></script>
<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;
var uploadUrl = "/savedata";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>

.gitignore

It contains files that will be ignored by git to upload .git node_modules

package.json

It contains Required node packages

{
"name": "simple-file-uploader",
"version": "1.0.1",
"description": "Simple file uploader demo using NodeJS",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.13.4",
"http": "0.0.0",
"multer": "^1.1.0",
"path": "^0.12.7"
}
}

server.js It uploads and saves files.

var express = require('express');
var app = express();
var path = require('path');
var http = require('http');
var multer = require('multer');
var storage = multer.diskStorage({
destination: './uploads/',
filename: function (req, file, cb) {
cb(null, file.originalname.replace(path.extname(file.originalname), "") + '-' + Date.now() + path.extname(file.originalname))
}
})
var upload = multer({ storage: storage })
app.use(express.static(path.join(__dirname, 'public')));
app.set('port', process.env.PORT || 3000);
app.post('/savedata', upload.single('file'), function(req,res,next){
console.log('Uploade Successful ', req.file, req.body);
});
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});