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)
Change your code. from :
to:
It should work.
Just use
any()
instead ofarray('file')
.When using
array('file')
, multer throws error because it expects all fields to be namedfile
, while ng-file-upload names themfile[0]
,file[1]
, etc… I wouldn’t recommend usingarrayKey: ''
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: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 namedfiles
on the server:upload.array('files')
. Change them to match up.Also, since you are receiving multiple files (
upload.array(...)
) you should look atreq.files
instead ofreq.file
.@shivam1401 Hi, can you explain why should add this ‘arrayKey’ field?