can't get file property using Multer

Question

I'm trying to upload an image from my form using Multer, when I insert the image everything works fine But when there is no image chosen I got an error.

Here is multer config all uploaded images are stored in public/images/uploads:

//handle file upload

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/images/uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+ '.jpg')
  }
});
var upload = multer({ storage: storage })

Now I want to get back the value of mainImageName but when I don't insert any image an error occurs cannot get property filename of undefined.

Here is the rest :

//Submit new post
router.post('/add', upload.single('mainimage'), function(req, res, next) {
var title = req.body.title;
var category = req.body.category;
var body = req.body.body;
var author = req.body.author;
var date = new Date();

if(req.file && req.file.mainimage){

    var mainImageName = req.file.filename;
    var mainImageMime = req.file.mainimage.mimetype;
    var mainImagePath = req.file.mainimage.path;
    var mainImageSize = req.file.mainimage.size;

}else{

    //if there was no image uploaded!!
    //noimage.png should be placed in public/images/uploads
    mainImageName = 'noimage.png';
}

console.log(mainImageName); //always returns noimage.png !!

//form validation
req.checkBody('title', 'You forgot the title').notEmpty();
req.checkBody('body', 'Please fill in the body').notEmpty();

//check errors
var errors = req.validationErrors();

if(errors){

var mycategories = []; var categories = db.get('categories'); categories.find({}, {}, function(err, categories) {

    for (i=0; i<categories.length; i++) {
          mycategories[i] = categories[i];
        }
 });
res.render('addpost', {
        'pageTitle': 'Add Post',
        'errors': errors,
        'title': title,
        'body': body,
        'categories': mycategories

    });

} else{
        var posts = db.get('posts');
        //submit Post
        posts.insert({   "title": title, 
                         "body": body,
                         "category": category,
                         "date": date,
                         "author": author,
                         "mainimage": mainImageName 

                 }, function(err, post) {
            if (err){
        res.send('There was an issue submitting the post.')
         } else {
            req.flash('success_msg', 'Post Submitted');
            res.location('/');
            res.redirect('/');
         }
         });
}

});

That's... right. If you do not pass a file, then req.files would be empty hence req.files[0] would be undefined hence req.files[0].filename would cause an error (since you are trying to get the property of an undefined object). Move the offending console.log() in the first IF statement and that should prevent the error from happening. — Mikey
Thanks Mikey but what I don't understand is whether I pass a file or not mainImageName always returns noimage.png. — melhirech
Edit your question with your route definition e.g. app.post('whatever', upload... — Mikey
That's because you set it to "noimage.png" in your code: var mainImageName = 'noimage.png' — fredrover
@fredrover I think he's trying to say it never enters the IF block when he does have an image. — Mikey

melhirech melhirech · Accepted Answer · 2017-04-07T22:50:39

I found the problem, the condition if(req.file && req.file.mainimage) was never met because req.file.mainimage is always undefined so I simply changed it to if(req.file) and it worked fine .

This is how it should look like:

if(req.file){

    var mainImageName = req.file.filename;
    var mainImageMime = req.file.mimetype;
    var mainImagePath = req.file.path;
    var mainImageSize = req.file.size;

}else{

    //if there was no image uploaded!!
    //noimage.png should be placed in public/images/uploads
    mainImageName = 'noimage.png';
}

can't get file property using Multer

1 Answers