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 >
        <div >
          <div >
            <h2 >Add Product</h2>

            <form action="/admin/add-product" method="POST" enctype="multipart/form-data">

              <label for="">Name</label>
              <input type="text" name="Name" >

              <label for="">Category</label>
              <input type="text" name="Category" >

              <label for="">Price</label>
              <input type="text" name="Price" >

              <label for="">Description</label>
              <input type="text" name="Description" >

              <label for="">Image</label>
              <input type="file" >

              <button  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.

CodePudding user response：

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

Based on the error message req.fileis 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.

CodePudding user response：

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

CodePudding user response：

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

 <label for="">Image</label>
 <input type="file" name = "img" >

try getting the file then using

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

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


});