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 hbs (not Express-Handlbars or Express-hbs), template prompts for file ok, but always got
app structure
app.js
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);
index.js
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) => {
var img = fs.readFileSync(req.file.path);
});
r.get('/', function(req, res){
res.render('index');
});
app.post('/', upload.single('picture'), (req, res) => {
var img = fs.readFileSync(req.file.path);
});
app.post('/uploadphoto', upload.single('picture'), (req, res) => {
var i = 1;
...
});
module.exports = r;
index.hbs
<form action="/uploadphoto" enctype="multipart/form-data" method="POST">
Single Img.
<input type="file" name="picture" accept="image/*" />
<input type="submit" value="Upload an Image"/>
</form>
<h2>{{dynamicHere}}</h2>
Already checked other SO including Cannot POST / error using express, and Cannot POST form node.js - express
Fiddler shows no more than status 404 and "Cannot post". Does not hit any breakpoint in VSC.
