title: I can't upload images using multer and express
body: <p>I want to upload image using a jade form then i want to show it in a posts page the problem is the images are uploaded as files with no extension and then i get Cannot read property 'mainimage' of undefined</p>
  
  <p><strong>My app.js code is below</strong> </p>
  
  <pre><code>var storage = multer.diskStorage({
      destination: function (req, file, callback) {
          callback(null, './public/images/uploads/');
      },
      filename: function (req, file, callback) {
          callback(null, file.fieldname + '-' + Date.now());
      }
  });
  
  var upload = multer({storage: storage}).single('mainimage');
  </code></pre>
  
  <p><strong>Then my posts.js</strong> </p>
  
  <pre><code>router.post('/add', function(req, res, nect){
      // Get The Form Values
      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.mainimage){
          var mainImageOriginalName   = req.file.mainimage.originalname;
          var mainImageName           = req.file.mainimage.name;
          var mainImageMime           = req.file.mainimage.mimetype;
          var mainImagePath           = req.file.mainimage.path;
          var mainImageExt            = req.file.mainimage.extension;
          var mainImageSize           = req.file.mainimage.size;
      } else{
          var mainImageName = 'noimage.png';
      }
  
      //Form Validation
      req.checkBody('title', 'Title field is required').notEmpty();
      req.checkBody('body', 'Body field is required');
  
      //Check errors
      var errors = req.validationErrors();
      if(errors){
       res.render('addpost',{
           "errors": errors,
           "title": title,
           "body": body
       });   
      } else{
          var posts = db.get('posts');
  
          //submit to db
          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', 'Post Submitted');
                  res.location('/');
                  res.redirect('/');
              }
          });
      }
  
  });
  </code></pre>
  
  <p><strong>And this my posts.jade Form</strong></p>
  
  <pre><code>form(method='post', action='/posts/add', enctype='multipart/form-data')
          .form-group
              label Title:
              input.form-control(name='title', type='text')
          .form-group
              label Category
              select.form-control(name='category')
                  each category, i in categories
                      option(value='#{category.title}') #{category.title}
          .form-group
              label Body
              textarea.form-control(name='body', id='body')
          .form-group
              label Main Image:
              input.form-control(name='mainimage', type='file', id='mainimage')
  </code></pre>
  
  <p><strong>And here is where i want to display it</strong></p>
  
  <pre><code>each post, i in posts
              .posts
                  h1
                      a(href='/posts/show/#{post._id}')
                          =post.title
                  p.meta Posted in #{post.category} by #{post.author} on #{moment(post.date).format('MM-DD-YYYY')}
                  img(src='/images/uploads/#{post.mainimage}')
                  !=post.body
                  a.more(href='/posts/show/#{post._id}') Read More
  </code></pre>