File upload using multer - node.js

Question

I am trying to make a web app that you can upload files to using express and multer, and I am having a problem that no files are being uploaded and req.file is always undefined.I have checked multiple solutions but none of them is working.
My reactjs component is as follows:
onSubmit(e) {
e.preventDefault();
const productData = {
name: this.state.name,
image: this.state.image,
description: this.state.description,
category: this.state.category,
quantity: this.state.quantity,
price: this.state.price
};
console.log(productData.image);
this.props.createProduct(productData, this.props.history);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
<form onSubmit={this.onSubmit} encType="multipart/form-data">
<UploadImage
name="image"
value={this.state.image}
onChange={this.onChange}
error={errors.image}
type="file"
info="Upload image of the product"
/>
<input
type="submit"
value="Submit"
className="btn btn-info btn-block mt-4"
/>
</form>
My router file is as follows:
const express = require("express");
const router = express.Router();
const multer = require("multer");
const path = require("path");
//Loading validation function
const validateProductInput = require("../../validation/product.js");
//Load product model
const Product = require("../../models/Product");
//#route GET api/products/test
//#desc Test product route
//#access public
router.get("/test", (req, res) => res.json({ msg: "Profile Works" }));
//Creating a multer API to upload images
const storage = multer.diskStorage({
destination: "../../uploads",
filename: function(req, file, cb) {
cb(
null,
file.fieldname + "." + Date.now() + path.extname(file.originalname)
);
}
});
//Init Upload
const upload = multer({
storage: storage
});
//#route Post api/products/add
//#desc Add product
//#access Private
router.post("/add", upload.single("image"), (req, res) => {
const { errors, isValid } = validateProductInput(req.body);
if (!isValid) {
//Return any erros with 400 status
return res.status(400).json(errors);
}
console.log("File: ", req.file);
Product.findOne({
name: req.body.name
}).then(product => {
if (product) {
errors.exist = "Item Already Exists";
return res.status(400).json(errors);
} else {
// let image_path = req.body.image;
// image_path = image_path.replace(
// /fakepath/g,
// "projects\\e-commerce\\MERN-eCommerce\\client\\src\\components\\dashboard\\images"
// );
const newProduct = new Product({
name: req.body.name,
image: req.body.image,
description: req.body.description,
category: req.body.category,
quantity: req.body.quantity,
price: req.body.price
});
newProduct
.save()
.then(product => res.json(product))
.catch(err => res.status(404).json());
}
});
});
//Upload image component
const UploadImage = ({ name, value, type, error, info, onChange }) => {
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this)
.val()
.split("\\")
.pop();
$(this)
.siblings(".custom-file-label")
.addClass("selected")
.html(fileName);
});
return (
<div className="custom-file">
<input
className={classnames(
"custom-file-input form-control form-control-lg",
{
"is-invalid": error
}
)}
name={name}
type={type}
value={value}
onChange={onChange}
/>
<label className="custom-file-label">Choose file</label>
{info && <small className="form-text text-muted">{info}</small>}
{error && <div className="invalid-feedback">{error}</div>}
</div>
);
};
UploadImage.propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string,
value: PropTypes.string.isRequired,
info: PropTypes.string,
error: PropTypes.string,
onChange: PropTypes.func.isRequired
};
export default UploadImage;
console.log("File: ", req.file); is always giving undefined and no file is uploaded to the uploads directory