title: 404 Cannot Post using Express & hbs
body: <p>Node Express (4.16) + Multer (3.2.3), was able to upload a photo. Now want to display some dynamic message after receiving upload, so I tried <a href="https://github.com/pillarjs/hbs" rel="nofollow noreferrer">hbs</a> (not Express-Handlbars or Express-hbs), template prompts for file ok, but always got</p>
  
  <p><a href="https://i.stack.imgur.com/MFRp2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MFRp2.png" alt="enter image description here"></a></p>
  
  <p>app structure</p>
  
  <p><a href="https://i.stack.imgur.com/6gmog.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6gmog.png" alt="enter image description here"></a></p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>const express = require('express')
  const bodyParser= require('body-parser')
  var path = require('path');
  const app = express();
  const multer = require('multer');
  fs = require('fs-extra');
  app.use(bodyParser.urlencoded({extended: false}));
  var index = require("./route/index");
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'hbs');
  app.use('/', index);
  app.post('*', index);
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const express = require('express');
  const r = express.Router();
  const bodyParser= require('body-parser');
  const app = express();
  const multer = require('multer');
  fs = require('fs-extra');
  app.use(bodyParser.urlencoded({extended: false}));
  
  var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads')         // uploads = name of the destination folder
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
    }
  })
  
  var upload = multer({ storage: storage });
  
  app.post('/', upload.single('picture'), (req, res) =&gt; {
      var img = fs.readFileSync(req.file.path);
  });
  
  r.get('/', function(req, res){
    res.render('index');
  });
  app.post('/', upload.single('picture'), (req, res) =&gt; {
      var img = fs.readFileSync(req.file.path);
      });
  
  app.post('/uploadphoto', upload.single('picture'), (req, res) =&gt; {
    var i = 1;
    ...
  });
  
  module.exports = r; 
  </code></pre>
  
  <p><strong>index.hbs</strong></p>
  
  <pre><code>&lt;form action="/uploadphoto" enctype="multipart/form-data" method="POST"&gt; 
    Single Img.
    &lt;input type="file" name="picture" accept="image/*" /&gt;
    &lt;input type="submit" value="Upload an Image"/&gt;
  &lt;/form&gt;
  &lt;h2&gt;{{dynamicHere}}&lt;/h2&gt;
  </code></pre>
  
  <p>Already checked other SO including <a href="https://stackoverflow.com/questions/35931135/cannot-post-error-using-express">Cannot POST / error using express</a>, and <a href="https://stackoverflow.com/questions/14902923/cannot-post-form-node-js-express">Cannot POST form node.js - express</a></p>
  
  <p>Fiddler shows no more than status 404 and "Cannot post". Does not hit any breakpoint in VSC.</p>