File not uploading in Express JS using Multer received fro Editor - node.js

Question

I am getting the file using TinyMCE Editor. Using the paste plugin and uploading it using Express Server. I have tried using different things. But need to upload file received from TinyMCE editor
Here is my front-end Code:
function example_image_upload_handler(blobInfo, success, failure, progress) {
var xhr, formData;
localStorage.myfile = blobInfo.blob()
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'http://localhost:5000/api/upload');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function () {
var json;
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', localStorage.myfile, blobInfo.filename());
xhr.send(formData);
};
const handleSubmit = async (e) => {
e.preventDefault();
console.log("hello");
example_image_upload_handler();
console.log(desc);
const newPost = {
username: user.username,
title,
desc,
};
if (file) {
const data = new FormData();
const filename = Date.now() + file.name;
data.append("name", filename);
data.append("file", file);
newPost.photo = filename;
try {
console.log("hello");
if (await axios.post("http://localhost:5000/api/upload", data)) {
// console.log("monu");
}
} catch (err) {
console.log(err);
}
}
try {
const res = await axios.post("http://localhost:5000/api/posts", newPost);
window.location.replace("/post/" + res.data._id);
} catch (err) {
console.log(err);
}
};
const handleEditorChange = (e) => {
console.log(
'Content was updated:',
setDesc(e.target.getContent())
);
}
return (
<div className="write">
{file && (
<img className="writeImg" src={URL.createObjectURL(file)} alt="" />
)}
<form className="writeForm" onSubmit={handleSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<i className="writeIcon fas fa-plus"></i>
</label>
<input
type="file"
id="fileInput"
style={{ display: "none" }}
onChange={(e) => setFile(e.target.files[0])}
/>
<input
type="text"
placeholder="Title"
className="writeInput"
autoFocus={true}
onChange={e => setTitle(e.target.value)}
/>
</div>
<Editor
apiKey="XXXXXXXXXXXXXXXXXXXXXXX"
initialValue="<p>Initial content</p>"
init={{
height: 500,
menubar: 'edit',
selector: 'textarea',
plugins: [
'advlist autolink lists link image',
'charmap print preview anchor help',
'searchreplace visualblocks code',
'insertdatetime media table paste wordcount',
'image imagetools paste'
],
images_upload_handler: example_image_upload_handler,
toolbar:
'undo redo | formatselect | bold italic | \
alignleft aligncenter alignright | \
bullist numlist outdent indent | image | help',
paste_data_images: true
}}
onChange={handleEditorChange}
/>
</div>
<button className="writeSubmit" type="submit">
Publish
</button>
</form>
</div>
);
Following is my express js upload API code:
const upload = multer({ storage: storage });
app.post("/api/upload", upload.single("file"), (req, res) => {
console.log("req");
console.log(req);
res.status(200).json("File has been uploaded");
});
Following is the error I am getting:
Please help me with the same.