req.file in multer always returns undefined - node.js

Question

My code below
const express = require("express");
const router = express.Router();
const mongoose = require("mongoose");
const path = require("path");
const bodyParser = require("body-parser");
Below is the config for the multer.
const multer = require("multer");
const upload = multer({ dest: 'uploads/'});
Edit:1.
Also tried this configuration instead of the direct upload variable.But this doesnt work either.
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./uploads/");
},
filename: (req, file, cb) => {
cb(null, new Date().toISOString() + file.originalname);
}
});
const fileFilter = (req, file, cb) => {
if (file.mimetype === "image/jpeg" || file.mimetype === "/image/png") {
cb(null, true);
} else {
cb(null, false);
}
};
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5
},
fileFilter: fileFilter
});
Product add form processing.
Here i am processing the form and console.log always returns undefined.
router.post("/productadd", upload.single("image"), (req, res) => {
console.log(req.file);
const newProduct = {
imagePath: "https://source.unsplash.com/random/480*480",
title: req.body.title,
description: req.body.description,
price: req.body.price
};
new Products(newProduct).save().then(product => {
res.redirect("/products");
});
});
Here is my form for the file upload
<form action="/productadd" Method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" placeholder="Enter the Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" id="" cols="30" rows="10" class="form-control" placeholder="Enter the content"></textarea>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" class="form-control" name="price" placeholder="Enter the Price">
</div>
<div class="form-group">
<label for="image">Choose an Image:</label>
<input type="file" class="form-control" name="image" />
</div>
<button class="btn btn-primary btn-sm" type="submit">Submit</button>