User validation failed: name: Cast to String failed for value - node.js

Question

I am getting the above mentioned error on uploading more than one image. For one image it's working well but multiple images it's creating a problem. It shows validation error because on append two time images its also appending the name and lastname two times.
In the Front-end, I am using React and on the backend, I am using the Nodejs Express MongoDB and multer for image uploading.
Client#####
constructor(props) {
super(props);
//binding
this.onFileChange = this.onFileChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
imgCollection: '',
name: '',
lastName: ''
}
}
// For the req body data on change on the text input
handleChange(e) {
this.setState({
[e.target.id]: e.target.value
})
}
//for image on change
onFileChange(e) {
this.setState({ imgCollection: e.target.files })
}
//FOr form submition
onSubmit(e) {
e.preventDefault()
var formData = new FormData();
for (const key of Object.keys(this.state.imgCollection)) {
formData.append('imgCollection', this.state.imgCollection[key])
formData.append('name', this.state.name )
formData.append('lastName', this.state.lastName)
}
axios.post("http://localhost:4000/api/upload-images", formData, {
}).then(res => {
console.log(res.data)
})
/* fetch('http://localhost:4000/api/upload-images', { method: 'POST', body: formData })
.then(res => {
res.json()
console.log(res)}) */
}
Server####
router.post('/upload-images', upload.array('imgCollection', 6), (req, res, next) => {
const reqFiles = [];
const url = req.protocol + '://' + req.get('host')
for (var i = 0; i < req.files.length; i++) {
reqFiles.push(url + '/public/' + req.files[i].filename)
}
const user = new User({
_id: new mongoose.Types.ObjectId(),
imgCollection: reqFiles,
...req.body
});
user.save().then(result => {
res.status(201).json({
message: "Done upload!",
userCreated: {
_id: result._id,
imgCollection: result.imgCollection,
name: result.name,
lastName: result.lastName
}
})
}).catch(err => {
console.log(err),
res.status(500).json({
error: err
});
})
})

Answer 1

I noticed that you are appending formData multiple times using the same key. I don't think that would work. Generally, while adding multiple values to a field in formData - in order to append them as an array, here's what you need to do, add '[]' at the end of the key name. Here's a function you can try using to add multiple files:
this.state.imgCollection.forEach(image => formData.append('imgCollection[]', image))