Fashaun/_example_ng-file-upload.md

## _example_ng-file-upload.md

      
    Raw
  

              _example_ng-file-upload.md
            
          
    ng-file-upload example with NodeJS

index.html should be in public folder in the same directory with app.js.

  
## app.js
var express = require('express'),
  path = require('path'),
  multiparty = require('connect-multiparty'),
  multipartyMiddleware = multiparty(),
  PORT = process.env.PORT || 27372;

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.post('/api/upload', multipartyMiddleware, function(req, res) {
  var file = req.files.file;
  console.log(file.name);
  console.log(file.type);
  console.log(file.path);
});

var server = app.listen(PORT, function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('the App listening at http://%s:%s', host, port);
});

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Upload example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
  <div class="container">
    <div>
      <h1>Upload example</h1>
      <hr />
      <div ng-app="fileUpload" ng-controller="MyCtrl">
        <button type="button" class="btn btn-default" ngf-select ng-model="file">Upload using model $watch</button>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="http://rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></script>
  <script>
    var app = angular.module('fileUpload', ['ngFileUpload']);

    app.controller('MyCtrl', ['$scope', 'Upload', function($scope, Upload) {
      $scope.$watch('file', function() {
        var file = $scope.file;
        if (!file) {
          return;
        }
        Upload.upload({
          url: 'api/upload',
          file: file
        }).progress(function(evt) {
          var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
          console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
        }).success(function(data, status, headers, config) {
          console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
        }).error(function(data, status, headers, config) {
          console.log('error status: ' + status);
        })
      });;
    }]);
  </script>
</body>
</html>
	var express = require('express'),
	path = require('path'),
	multiparty = require('connect-multiparty'),
	multipartyMiddleware = multiparty(),
	PORT = process.env.PORT \|\| 27372;

	var app = express();

	app.use(express.static(path.join(__dirname, 'public')));

	app.post('/api/upload', multipartyMiddleware, function(req, res) {
	var file = req.files.file;
	console.log(file.name);
	console.log(file.type);
	console.log(file.path);
	});

	var server = app.listen(PORT, function() {
	var host = server.address().address;
	var port = server.address().port;
	console.log('the App listening at http://%s:%s', host, port);
	});
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Upload example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	</head>
	<body>
	<div class="container">
	<div>
	<h1>Upload example</h1>
	<hr />
	<div ng-app="fileUpload" ng-controller="MyCtrl">
	<button type="button" class="btn btn-default" ngf-select ng-model="file">Upload using model $watch</button>
	</div>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
	<script src="http://rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></script>
	<script>
	var app = angular.module('fileUpload', ['ngFileUpload']);

	app.controller('MyCtrl', ['$scope', 'Upload', function($scope, Upload) {
	$scope.$watch('file', function() {
	var file = $scope.file;
	if (!file) {
	return;
	}
	Upload.upload({
	url: 'api/upload',
	file: file
	}).progress(function(evt) {
	var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
	console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
	}).success(function(data, status, headers, config) {
	console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
	}).error(function(data, status, headers, config) {
	console.log('error status: ' + status);
	})
	});;
	}]);
	</script>
	</body>
	</html>