facing some issue uploading file and data with multer in express server - node.js

Question

I have 2 problems. I am trying to upload an excel file to the server when I upload an excel file I got the file on my console log but the file is not saving into the folder which I declared on my storage variable.
// Middleware
app.use(express.json())
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 }));
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
var upload = multer({ storage: storage })
File upload API. The 2nd problem is I have sent some data and a file from frontend. I am getting the file only but on my req.body I got undefined. If I remove the upload.single('file') then I got the other data.
app.post("/upload-excel", upload.single('file'), async (req, res) => {
const vendor = req.body
const file = req.files.file;
const filename = file.name;
console.log(vendor);
})
Here is my frontend:
const ProductImport = function () {
const [file, setFile] = useState<any>();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [fileName, setFileName] = useState("");
const { userDetails } = UseAuth()
const saveFile = (e) => {
setFile(e.target.files[0]);
setFileName(e.target.files[0].name);
};
const uploadFile = async (e: any) => {
e.preventDefault()
const formData = new FormData();
formData.append("file", file);
formData.append("fileName", fileName);
formData.append("vendor", userDetails.role);
formData.append("store", userDetails.store);
formData.append("publisher", userDetails.email);
fetch('http://localhost:5000/upload-excel', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.insertedId) {
alert('excel Added')
}
})
.catch(error => {
console.error('Error:', error);
});
};
return (
<form onSubmit={uploadFile}>
<label htmlFor="formGroupExampleInput" className="form-label">Example label</label>
<input type="file" onChange={saveFile} />
<button type="submit">Upload</button>
</form>
)
}
backend folder structure