Error when submitting form "TypeError: Cannot read properties of undefined (reading 'firstName')"

I tried to submitted the input from my add.ejs to send it to my mongodb.

add.ejs

<body>
<div class="container">
    <div class="row my-3 justify-content-md-center">
        <div class="col-md-8 mb-4">
            <form class="form-horizontal" method="POST" action="/insert" enctype="multipart/form-data">
                <div class="form-group">
                    <div style="height: 125px;"></div>
                    <label class="control-label col-sm-2">Picture: </label>
                    <div class="col-sm-10">
                        <input type="file" class="form-control" style= "background-color: #1E0E81;
                        color: white; " name="image">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">First Name: </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style= "background-color: #1E0E81;
                        color: white;" name="firstName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Last Name: </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style= "background-color: #1E0E81;
                        color: white; " name="lastName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Email: </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style= "background-color: #1E0E81;
                        color: white; " name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Telephone: </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style= "background-color: #1E0E81;
                        color: white; " name="telephone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Description: </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style= "background-color: #1E0E81;
                        color: white; " name="description">
                    </div>
                </div><br>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Now and then, I got an error "Cannot POST /insert". So I tried to console.log first to see what the error is and I got error message "TypeError: Cannot read properties of undefined (reading 'firstName')"

Here is my routes file.

myRouter.js

const express =require('express')
const router = express.Router()


const Gallery = require('../models/gallery') 


const multer = require('multer')

const storage = multer.diskStorage({
    destination:function(req,file,cb){
        cb(null,'./public/image/galleries') 
    },
    filename:function(req,file,cb){
        cb(null,Date.now()+".jpg") 
    }
})


const upload = multer({
    storage:storage
})

router.get('/',(req,res)=>{
    Gallery.find().exec((err,doc)=>{
        res.render('home.ejs',{gallery:doc})
    })
})

router.get('/donate',(req,res)=>{
    res.render('donate.ejs')
})

router.get('/add',(req,res)=>{
    res.render('add.ejs')
})

router.post('/insert'),upload.single("image"),(req,res)=>{
    let data = new Gallery({
        firstName:req.body.firstName,
        lastName:req.body.lastName,
        email:req.body.email,
        telephone:req.body.telephone,
        description:req.body.description,
        image:req.file.filename
    })
    Gallery.saveGallery(data,(err)=>{
        if(err) console.log(err)
        res.redirect('/')
    }) 
}
// router.post('/insert',(req,res)=>{
//     console.log(req.body.firstName),
//     console.log(req.body.lastName),
//     console.log(req.body.email),
//     console.log(req.body.telephone),
//     console.log(req.body.description),
//     console.log(req.body.image)
//     res.render('add')
// })

module.exports = router

Please help me find out what the problems is

Solution

You have a typo in this line:

router.post('/insert'),upload.single("image"),(req,res)=>{

There should not be a closing bracket after '/insert'. Try this:

router.post('/insert',upload.single("image"),(req,res)=>{