multer: 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]);

});

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 17 (4 by maintainers)

Most upvoted comments

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.

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.

The reason for the error is that multer currently does not support the array syntax that ng-file-upload uses by default which is files[0], files[1], files[2], etc. multer is expecting a series of files with the same field name.

The easiest solution is to set ng-file-upload’s arrayKey option like so to avoid appending the [index] part

The field is named file in the browser: data: {file: files}. But it’s named files on the server: upload.array('files'). Change them to match up.

Also, since you are receiving multiple files (upload.array(...)) you should look at req.files instead of req.file.

@shivam1401 Hi, can you explain why should add this ‘arrayKey’ field?