upload-multiple-file-angularjs

server.js

var express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var app = express();
var port = 5000;

app.set('port', port); 
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (request, file, callback) {
    callback(null, __dirname + '/uploads');
  },
  filename: function (request, file, callback) {
    console.log(file);
    callback(null, file.originalname)
  }
});

var upload = multer({storage: storage}).array('photo', 5);

app.get('/', function(resuest, response) {
  response.sendFile(__dirname + '/index.html');
});

app.post('/upload', function(request, response) {
  console.log('req.body: ', request.body);// vi sao o day khong thay req.body.
  upload(request, response, function(err) {
    // console.log('req: ', request);
    if(err) {
      console.log('Error Occured');
      console.log('Error: ', err.message);
      response.end('Faild');
      return;
    }
    console.log('req.body:', request.body.name);
    console.log('req.files:', request.files);
    // request.files is an object where fieldname is the key and value is the array of files     
    ;
    response.end('Your Files Uploaded');
    console.log('Photo Uploaded');
  })
});

var server = app.listen(port, function () {
  console.log('Listening on port ' + server.address().port)
});

upload-multiple-file-angularjs.js

myApp.directive('fileModel', ['$parse', function ($parse) {
  return {
     restrict: 'A',
     link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;
        var isMultiple = attrs.multiple;
        element.bind('change', function(){

          // scope.$apply(function(){
          //   modelSetter(scope, element[0].files[0]);
          // });
          var values = [];
          angular.forEach(element[0].files, function (item) {
              var value = {
                 // File Name 
                  name: item.name,
                  //File Size 
                  size: item.size,
                  //File URL to view 
                  url: URL.createObjectURL(item),
                  // File Input Value 
                  _file: item
              };
              values.push(value);
          });
          scope.$apply(function () {
              if (isMultiple) {
                  modelSetter(scope, values);
              } else {
                  modelSetter(scope, values[0]);
              }
          });
        });
     }
  };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
  this.uploadFileToUrl = function(file, uploadUrl){
     var fd = new FormData();
     fd.append('file', file);
     console.log('fd: ', fd);
     console.log('file: ', file);
     $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: undefined
     })
  
     .success(function(){
     })
  
     .error(function(){
     });
  }
}]);

myApp.controller('UploadFileController', ['$scope', 'fileUpload', function($scope, fileUpload){
  $scope.uploadFile = function(){
     var file = $scope.files;
     
     console.log('file is ' );
     console.dir(file);
     
     var uploadUrl = "http://localhost:5000/upload";
     fileUpload.uploadFileToUrl(file, uploadUrl);
  };
}]);