undefined filename error with multer nodejs express

multer is causing uncaught error though if i do req.file i am able log image without any issue however when i do req.file.filename i am getting uncaught error, in the form name image is correctly declared and i can see image on terminal on post request through req.file once again. thanks

const router = express.Router();
const bodyParser = require("body-parser")
const multer = require("multer");
const path = require("path");
const fs = require("fs");
const upload = multer({ dest: "uploads/" });

app.use(bodyParser.urlencoded({ extended: false }));

router.post("/", upload.single("image"), async (req, res, next) => {
    var fileName = req.file.filename;
    console.log(fileName);
 })