Uploading file with multer AND get data from ajax - node.js

Question

I have a problem to using multer when i have some data to pass with ajax at the same time (from the front side) to the server side (with nodejs).
I think there is a conflict between the two methods. Here an example :
My HTML :
<form action="api/stats" enctype="multipart/form-data" method="post">
<div class="form-group">
<div class="mb-3">
<label for="inputBookName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputBookName">
</div>
<div class="mb-3">
<label for="inputBookCategory" class="form-label">Categories</label>
<select id="inputBookCategory" class="form-select" multiple="multiple"></select>
</div>
<input type="file" name="uploaded_file">
<input type="submit" value="Send!">
</div>
</form>
My client side : (I have to pass "bookInfo" object with some data that I get from select2 (categoryName). When i click on the submit button :
const dataSelectedCatagories = $('#inputBookCategory').select2('data');
const categories = [];
let bookInfo;
for (let j = 0; j < dataSelectedCatagories.length; j++) {
const category = dataSelectedCatagories[j];
const categoryId = category._resultId;
const categoryName = category.text;
categories.push({
id: categoryId,
name: categoryName
});
}
bookInfo = {
bookid: Date.now(),
bookname: bookName,
name: categoryName
};
$.ajax({
type:"POST",
dataType:"json",
contentType: "application/json",
data:JSON.stringify(bookInfo), //Send some datas to front
url:"api/stats"
}).done(function(response){
console.log("Response of update: ",response)
}).fail(function(xhr, textStatus, errorThrown){
console.log("ERROR: ",xhr.responseText)
return xhr.responseText;
});
My Server side
const multer = require('multer');
const path = require('path');
const image_storage = multer.diskStorage({
destination: path.join(__dirname , '../../public/uploads'),
filename: function(req, file, cb){
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});
const fileUpload = multer({
storage: image_storage,
limits:{fileSize: 2000000} // 1 mb
}).single('uploaded_file');
uploadBookMulter = async (req, res) => {
console.log('body' , req.body) //get the datas from the front
await fileUpload(req, res, (err) => {
console.log('file : ', req.file) //here the req.file will turn out empty
})
};
The upload works very well. As well as the data feedback in ajax. The problem is when I plug the two together, the req.file is empty...
Isn't there a solution to have the data of the ajax and that of the multer side?