Unable to upload ( image + user data ) from react to node.js backend - node.js

Question

When i click the register button then the REGISTER_USER function is called and then it creates a form obj with all the data and post it to the backend . i don't know why it is giving 500 error , cors error even tough i added cors in my app.js (node.js file)
Please help me with this issue ! Thanks in advance ...
Error
This is my backend Code
This implementsthe upload file and the user data to the data base
const imageStorage = multer.diskStorage({
destination: "./assets/images/Customers",
filename: (req, file, cb) => {
cb(
null,
file.originalname.split(".")[0] +
"-" +
Date.now() +
"." +
file.originalname.split(".")[1]
);
},
});
const upload_image = multer({
storage: imageStorage,
limits: {
fileSize: 10000000,
},
fileFilter(req, file, cb) {
if (!file.originalname.match(/\.(png|jpg)$/)) {
return cb(new Error("Only Png / Jpg format is accepted"));
}
cb(undefined, true);
},
});
router.post("/create-user", upload_image.single("image") , async (req, res) => {
try{
console.log(req.body)
console.log(req.file.filename)
let isPresent = await User.findOne({Name : req.body.Email.toLowerCase()})
if(isPresent !== null){
return res.status(400).json({ success : false , message : "Customer already present in the data base!"})
}else{
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(req.body.Password , salt)
let data = {...req.body , Name : req.body.Name.toLowerCase() , Password : hashedPassword , Email : req.body.Email.toLowerCase() , ProfilePic : req.file.filename};
console.log(data)
let Created_Customer = await User.create(data)
return res.status(200).json({success : true , message : "Successfully created the customer!" , Customer : Created_Customer});
}
}catch(err){
return res.status(500).json({success : false , message : err});
}
});
This is my FrontEnd Form Code
Function that post the data
const [adminData , setAdminData] = useState({
Name : "" ,
Email : "",
Password : "",
Role : "admin",
file : ""
})
const REGISTER_USER = async (e) =>{
e.preventDefault()
const formData = new FormData()
formData.append("Name" , adminData.Name)
formData.append("Email" , adminData.Email)
formData.append("Role" , adminData.Role)
formData.append("Password" , adminData.Password)
formData.append("image" , adminData.file)
const res = await fetch("http://localhost:5000/api/create-user" , {
method : "POST",
body : formData
})
console.log(res)
}
form
<form onSubmit={REGISTER_USER}>
<div>
<span>Name</span>
<span>
<input type="text" name ="Name" value ={adminData.Name} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
<PersonOutlineRoundedIcon/>
</span>
</div>
<div>
<span>Email</span>
<span>
<input type="text" name ="Email" value ={adminData.Email} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
<PersonOutlineRoundedIcon/>
</span>
</div>
<div >
<span>Password</span>
<span >
<input type="password" name ="Password" value ={adminData.Password} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
<VisibilityOutlinedIcon />
</span>
</div>
<span>
<input type="file" name ="file" value ={adminData.file} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
</span>
<button type="submit">
<span>Register</span>
<ArrowForwardOutlinedIcon/>
</button>
</form>
Data is recieved in this format at the backend