getting Error: Unexpected field when trying to upload multiple files

Question

If I use the example in multer's readme, I can upload a single file without problems. However, when I use the same sample I cannot do so for multiple files. I tried using the regular

Error: Unexpected field at makeError (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/lib/make-error.js:12:13) at wrappedFileFilter (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/index.js:39:19) at Busboy. (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/lib/make-middleware.js:112:7) at emitMany (events.js:108:13) at Busboy.emit (events.js:182:7)

HTML

<div class="button btn btn-danger" ngf-select ng-model="files" name="files" ngf-multiple="true">Select</div>

submit

APP.JS

if($scope.files){
    console.log('upload multiple works');
    console.log($scope.files);
    $scope.uploadFiles($scope.files);
  }
};

//FOR MULTIPLE FILES
$scope.uploadFiles = function (files) {
  if (files && files.length) {
    for (var i = 0; i < files.length; i++) {
      Upload.upload({
        url: 'api/admin/photos',
        data: {file: files[i]}
      }).then(function(resp){
        console.log('Successfully ' + resp.config.data.file.name);
        $scope.myPic = resp.config.data.file.name;
      },
      function(resp){
        console.log('Error status: ' + resp.status);
      },
      function(evt){
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
         console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
      })
      }
    }

  };

NODE JS

   var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/img')
  },
  filename: function (req, file, cb) {
    //cb(null, file.originalname + '-' + Date.now())
    cb(null, file.originalname )
  }
});

var upload = multer({ storage: storage });

apiRoutes.post('/admin/photos',upload.array('files'),function(req,res){

//save to database
var photo = new Photos({
    url: req.file.originalname,
    name: req.file.filename
});

photo.save(function(err,docs){
    if(err) throw err;

});


console.log(req.files);
console.log(req.file.originalname);
//console.log(req.file.originalname);
res.json(req.files);

});

Lastly when I use an error checking with app.use I get the following node error

{ [Error: Unexpected field]


code: 'LIMIT_UNEXPECTED_FILE',
  field: 'file[0]',
  storageErrors: [] }

Krzysztof Sztompka Krzysztof Sztompka · Accepted Answer · 2016-01-14T20:04:14

If you upload multiple files and use upload.array('files') then your uploaded files are available in req.files, and this is an array of files.

edit: simple example how to change your code:

apiRoutes.post('/admin/photos',upload.array('files'),function(req,res){
    req.files.forEach(function(file) {
      //and here you have file.originalname and file.filename
    });
});

edit1:

from APP.JS send files in one request:

//FOR MULTIPLE FILES
$scope.uploadFiles = function (files) {
      Upload.upload({
        url: 'api/admin/photos',
        data: {file: files}
      });
  };

getting Error: Unexpected field when trying to upload multiple files

3 Answers