cannot read property filename multer and node error - node.js

Question

I have just started building this example of using multer with node js. I built a separate project which actually runs fine, but when I copied over the same setting making minor changes to routes on like from app.get to router.get, I am getting the error:
TypeError: Cannot read property 'filename' of undefined
here is my code for the route:
router.post('/userprofilepic', ensureAuthenticated, (req, res) => {
upload(req, res, (err) => {
if (err) {
res.render('/user/userdashboard', {
msg: err
});
} else {
const newImage = {
imageName: req.file.filename,
image_caption: req.body.image_caption,
member_id: req.user.member_id
}
new Image(newImage)
.save()
.then(image => {
req.flash('success_msg', 'Image added');
res.redirect('/user/userdashboard');
})
.then(resize => {
let imgHeight = 150;
let imgWidth = 150;
sharp(req.file.path)
.blur(.3)
.toFile('public/thumbs/blurred_' + req.file.originalname, function (err) {
if (!err) {
req.flash('success_msg', 'Thumbnail created');
//res.redirect('/');
}
});
})
.catch(error => {
console.log(error);
});
}
});
});
This is my multer configuration:
// Set storage engine
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function (req, file, cb) {
cb(null, req.user.member_id + '_' + Date.now() + '_' + file.originalname);
}
});
// Init upload
const upload = multer({
storage: storage
}).single('imageName');
//load user model
require('../models/User');
const User = mongoose.model('users');
//load user profile model
require('../models/Profile');
const Profile = mongoose.model('profiles');
// Load images model
require('../models/Images');
const Image = mongoose.model('images');
and finally my form:
<form action="/user/userprofilepic" method="POST" enctype="multipart/form-data">
<div class="form-group">
<img id="blah" src="#" alt="your image" height="300" />
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" name="imageName" id="imageName">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Image Caption</label>
<input type="text" class="form-control" name="image_caption">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<input type="text" class="form-control" name="member_id" value="{{user.member_id}}" hidden>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I tried console.log(req.file) and it's undefined. For the life of me I am unable to understand what I did wrong.
Please advise.

Answer 1

Figured it out...it was my mistake, in my server. js I had initialized an upload method which was overriding the multer upload function and hence no filename.