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 · Accepted Answer · 2016-01-14 20:33:58Z

0

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

edited Jan 14, 2016 at 20:33

answered Jan 14, 2016 at 20:04

Krzysztof Sztompka

7,2144 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

arsenalist Over a year ago

it doesn't even allow me to get that far. If I simply do a console.log(req) I still get the error. I get the error before doing anything. So it seems like something is wrong elsewhere.

Krzysztof Sztompka Over a year ago

I edited my answer. For angular upload you use ng-file-upload, yes ? And this module allow to send multiple files in multiple requests, one by one (your code) or in one request (my code)

arsenalist Over a year ago

Yes, I've done this but from the client still getting error 500 and from node still getting unexpected field. But yes, using ng-file-upload.

Krzysztof Sztompka Over a year ago

ok, maybe there is something more. Please paste full node js file

arsenalist Over a year ago

i've added the rest of the node file pertaining to that. Is the HTML ok?

arsenalist · Accepted Answer · 2016-01-26 14:11:10Z

0

I had to change

data: {file: files}

to

data: {file: files[i}

this solved it.

answered Jan 26, 2016 at 14:11

arsenalist

3915 silver badges19 bronze badges

Comments

Dinesh Patil · Accepted Answer · 2017-04-14 13:32:09Z

0

Change your Upload script in angular

you should send separate object for image and your object name must match in both nodejs and angular js

Use following code

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

For multiple files

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

answered Apr 14, 2017 at 13:32

Dinesh Patil

1,07210 silver badges14 bronze badges

Collectives™ on Stack Overflow

getting Error: Unexpected field when trying to upload multiple files

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related