title: AngularJS failed to upload file express
body: <p>I am trying to upload a file to express ( so i can upload it to mongoDB later on). However, when I try to upload a file to express, i print out the response data, and it seems like nothing is getting passed in. </p>
  
  <p>Im using ng-file-upload.min.js. Can anyone help me out? </p>
  
  <h3>script.js</h3>
  
  <pre><code>var app = angular.module('fileUpload', ['ngFileUpload']);
  
  app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
      $scope.uploadFiles = function(files, errFiles) {
          $scope.files = files;
          $scope.errFiles = errFiles;
          angular.forEach(files, function(file) {
              file.upload = Upload.upload({
                  url: '/uploadFile',
                  data: {file: file}
              });
  
              file.upload.then(function (response) {
                  $timeout(function () {
                      file.result = response.data;
                  });
              }, function (response) {
                  if (response.status &gt; 0)
                      $scope.errorMsg = response.status + ': ' + response.data;
              }, function (evt) {
                  file.progress = Math.min(100, parseInt(100.0 *evt.loaded / evt.total));
              });
          });
      }
  }]);
  </code></pre>
  
  <h3>Server.js</h3>
  
  <pre><code>var express = require('express');
  var path = require('path'); //core module 
  var databaseUrl = "localhost:27017/DB"; // default env
  var bodyParser = require('body-parser');
  var multer  = require('multer');
  var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, './uploads');
    },
    filename: function (req, file, callback) {
      callback(null, file.fieldname + '-' + Date.now());
    }
  });
  var upload = multer({ storage : storage}).single('userFile');
  
  // Configure app
  var app = express(); 
  
  // Store all html files in views 
  app.use(express.static(__dirname + '/views'));
  // Parses recived json input 
  app.use(bodyParser.json());
  // Store all js in Scripts folder
  app.use(express.static(__dirname + '/scripts'));
  
  // Technology not needed but good practice, especailly when serval people are working on it 
  app.get('/', function (req, res) {
      res.sendFile('index.html');
  }); 
  
  // Listen for Seach collection request
  
  
  app.post('/uploadFile',function(req,res){
      upload(req,res,function(err) {
          if(err) {
              console.log("Error uploading file"); 
          }else{
              var databaseName = "E-learn" , collection = "Uploads"; 
              var data = req.body;
              console.log("Got req:"+req);
          }
      });
  });
  
  // Implement a web server to listen to requests on port 4444 
  app.listen(5555, function(){
      console.log('ready on port 5555'); 
  }); 
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!-- Page Content --&gt;
  &lt;div class="container"  ng-app="fileUpload" ng-controller="MyCtrl"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;&lt;strong&gt;Upload Files&lt;/strong&gt; &lt;small&gt;Bootstrap files upload&lt;/small&gt;&lt;/div&gt;
      &lt;div class="panel-body"&gt;
  
        &lt;!-- Standar Form --&gt;
        &lt;h4&gt;Select files from your computer&lt;/h4&gt;
        &lt;form action="" method="post" enctype="multipart/form-data" id="js-upload-form"&gt;
          &lt;div class="form-inline"&gt;
            &lt;div class="form-group"&gt;
              &lt;input name="userFile" type="file" ngf-select="uploadFiles($files, $invalidFiles)" multiple accept="image/*" ngf-max-height="1000" ngf-max-size="1MB"&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit"&gt;Upload files&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;!-- Drop Zone --&gt;
        &lt;h4&gt;Or drag and drop files below&lt;/h4&gt;
        &lt;div class="upload-drop-zone" id="drop-zone" ngf-drop ngf-select ng-model="files" class="drop-box" 
      ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
      accept="image/*,application/pdf" ngf-pattern="'image/*,application/pdf'"&gt;
          Just drag and drop files here
        &lt;/div&gt;
        &lt;!-- Progress Bar
        &lt;div class="progress"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
            &lt;span class="sr-only"&gt;60% Complete&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        --&gt;
        &lt;!-- Upload Finished --&gt;
        &lt;div class="js-upload-finished"&gt;
          &lt;h3&gt;Processed files&lt;/h3&gt;
          &lt;div class="list-group"&gt;
              &lt;ul&gt;
              &lt;li ng-repeat="f in files" style="font:smaller"&gt;&lt;span class="badge alert-success pull-right"&gt;{{f.name}} {{f.$errorParam}}&lt;/span&gt;
                &lt;span class="progress" ng-show="f.progress &gt;= 0"&gt;
                  &lt;div style="width:{{f.progress}}%" ng-bind="f.progress + '%'"&gt;&lt;/div&gt;
                &lt;/span&gt;
              &lt;/li&gt;
              &lt;li ng-repeat="f in errFiles" style="font:smaller"&gt;
                  {{f.name}} {{f.$error}} {{f.$errorParam}}
              &lt;/li&gt; 
            &lt;/ul&gt;
            {{errorMsg}}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>Result 
  Error uploading file</strong></p>