FFMPEG: Cannot read properties of undefined (reading 'format') - node.js

Question

I am currently to convert a video file to produce a thumbnail through ffmpeg, react-dropzone, and express. However I keep getting a error of "Cannot read properties of undefined (reading 'format')" in my console. For some reason it can not read the "metadata.format.duration" in my program, I have checked if ffmpeg is properly installed by running the ffmpeg --version in my console, and I get all the details, along with ffprobe --version as well.
Here is my code:
upload.js
router.post("/thumbnail", (req, res) => {
let thumbsFilePath ="";
let fileDuration ="";
// req.body.filepath
ffmpeg.ffprobe(req.body.filepath, function(err, metadata){
console.dir(metadata);
console.log(metadata.format.duration);
fileDuration = metadata.format.duration;
})
ffmpeg(req.body.filepath) //req.body.filepath
.on('filenames', function (filenames) {
console.log('Will generate ' + filenames.join(', '))
console.log(filenames);
thumbsFilePath = "./uploads/thumbnails/" + filenames[0];
})
.on('end', function () {
console.log('Screenshots taken');
return res.json({ success: true, thumbsFilePath: thumbsFilePath, fileDuration: fileDuration})
})
.screenshots({
// Will take screens at 20%, 40%, 60% and 80% of the video
count: 3,
folder: './uploads/thumbnails',
size:'320x240',
// %b input basename ( filename w/o extension )
filename:'thumbnail-%b.png'
});
})
FrontEnd drop code:
AddVideo.js
const onDrop = (files) => {
let formData = new FormData();
const config = {
header: { 'content-type': 'multipart/form-data' }
}
console.log(files)
formData.append("file", files[0])
axios.post('http://localhost:5000/api/upload/uploadfiles', formData, config)
.then(response => {
if (response.data.success) {
let variable = {
filePath: response.data.filePath,
fileName: response.data.fileName
}
setFilePath(response.data.filePath)
//gerenate thumbnail with this filepath !
axios.post('http://localhost:5000/api/upload/thumbnail', variable)
.then(response => {
if (response.data.success) {
setDuration(response.data.fileDuration)
setThumbnail(response.data.thumbsFilePath)
} else {
alert('Failed to make the thumbnails');
}
})
} else {
alert('failed to save the video in server')
}
})
}
return (
<div style={{ maxWidth: '700px', margin: '2rem auto' }}>
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
{/* <Title level={2} > Upload Video</Title> */}
</div>
<FormControl>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Dropzone
onDrop={onDrop}
multiple={false}
maxSize={800000000}>
{({ getRootProps, getInputProps }) => (
<div style={{ width: '300px', height: '240px', border: '1px solid lightgray', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
{...getRootProps()}
>
<input {...getInputProps()} />
<Icon type="plus" style={{ fontSize: '3rem' }} />
</div>
)}
</Dropzone>
</div>
</FormControl>
</div>
)
}
The video I am trying to upload is a mp4 file. I am using fluent-ffmpeg as a dependency.