unable to send multiple files using node, getting Error: unexpected field

I am using Angular ng-file-upload to upload files. When sending here is the html, but I am getting error ‘Error: Unexpected field’ and from the client getting Internal Error 500. Can you please assist with this issue?

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

Angular as follows

if($scope.files){
        console.log('upload multiple works');
        console.log($scope.files);
        $scope.uploadFiles($scope.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}
          }).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);
          })
          }
        }

      };

and using node

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 });

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

    console.log(req);


    //save to database



    console.log(req);
     console.log(req.file.originalname);
    console.log(req.file.originalname);
     res.json(req.file[0]);

});

[shivam1401-zz]

Change your code. from :

Upload.upload({
            url: 'api/admin/photos',
            data: {file: files}
 })

to:

Upload.upload({
            url: 'api/admin/photos',
            arrayKey: '',
            data: {file: files}
          })

It should work.

[josduj]

Just use any() instead of array('file').

When using array('file'), multer throws error because it expects all fields to be named file, while ng-file-upload names them file[0], file[1], etc… I wouldn’t recommend using arrayKey: '' because it’s basically a hack, and messes up serialization of other arrays if you are sending additional data.

Another option is to use files(), and do something like:

upload.files([
    { name: 'file[0]', maxCount: 1 },
    { name: 'file[1]', maxCount: 1 },
    ...
])

But then req.files is object with arrays of files.