Cannot read property 'Image' of undefined error on Nodejs

Question

I was Trying to make a shopping cart. i was making admin panel in which i need to submit the image for adding product. After creating the Form

 <section> <div class="container mt-4"> <div class="row"> <div class="col-md-6"> <h2 class="text-cnter">Add Product</h2> <form action="/admin/add-product" method="POST" enctype="multipart/form-data"> <label for="">Name</label> <input type="text" name="Name" class="form-control"> <label for="">Category</label> <input type="text" name="Category" class="form-control"> <label for="">Price</label> <input type="text" name="Price" class="form-control"> <label for="">Description</label> <input type="text" name="Description" class="form-control"> <label for="">Image</label> <input type="file" class="form-control"> <button class="btn btn-success mt-4" type="submit">Submit </button> </form> </div> </div> </div> </div> </section>

In admin.js file ( where router of admin )

 router.get('/add-products',function(req,res){ res.render('admin/add-products') }); // router.post('/add-product',function (req,res) { // console.log('Got it') // }); router.post( "/add-product", function( req, res ) { console.log(req.body) console.log(req.file.Image) }); module.exports = router;

app.js file

 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var hbs = require('express-handlebars'); var fileupload =require('express-fileupload'); var bodyParser = require('body-parser'); var userRouter = require('./routes/user'); var adminRouter = require('./routes/admin'); const {allowInsecurePrototypeAccess} = require('@handlebars/allow-prototype-access') var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs'); //Layout Directory Set app.engine('hbs',hbs.engine({ extname:'hbs', defaultLayout:'layout',layoutsDir:__dirname+'/views/layout/',partialsDir:__dirname+'/views/partials'})); app.engine('handlebars', hbs.engine({ handlebars: allowInsecurePrototypeAccess(hbs) })); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(fileupload()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', userRouter); app.use('/admin', adminRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development'? err: {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;

after running with nodemon giving submit button shows

Cannot read property 'Image' of undefined

TypeError: Cannot read property 'Image' of undefined

Btw i was just started on nodejs.Thats why i dont know more about it.

Answer 1

You might want to check this line in your admin.js file: console.log(req.file.Image)

Based on the error message req.file is undefined and therefor it can't read Image .

The reason is, that express needs extra middleware to correctly handle multipart/form-data. Check out Multer . This should help you getting all the parts of your form including the file(s).

Also be aware that your file input does not have a same. So you definitely can't find it with Image .

Answer 2

Seems like req.file is undefined, so it can't read the property Image of undefined.

Answer 3

try changing this. first provide a name to your input file

 <label for="">Image</label>
 <input type="file" name = "img" class="form-control">

try getting the file then using

router.post( "/add-product", function( req, res ) {

console.log(req.body)
console.log(req.files.img)


});