So I have been trying to upload an image to cloudinary from by react front end. but when I upload the image it gives me 'undefined' alert in client side. So I used the chrome console and found out that the error indeed is 'Failed to load resource: the server responded with a status of 500' in the http://localhost:3000/api/upload. i checked my backend and this error is populating from the catch in the router post function.

this is the upload.js file'

const uprouter = express.Router()
import cloudinary from 'cloudinary';
//import auth from '../middleware/auth.js';
//import authAdmin from '../middleware/authAdmin.js';
import fs from 'fs';

// we will upload image on cloudinary
cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.CLOUD_API_KEY,
    api_secret: process.env.CLOUD_API_SECRET
})

// Upload image only admin can use
uprouter.post('/upload', (req, res) =>{
    try {
        if(!req.files || Object.keys(req.files).length === 0)
            return res.status(400).json({msg: 'No files were uploaded.'})
        
        const file = req.files.file
        if(file.size > 1024*1024) {
            removeTmp(file.tempFilePath)
            return res.status(400).json({msg: "Size too large"})
        }

        if(file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/png'){
            removeTmp(file.tempFilePath)
            return res.status(400).json({msg: "File format is incorrect."})
        }
        if(file.size === undefined) {
            console.log("myProperty value is the special value `undefined`")
          }

        cloudinary.v2.uploader.upload(file.tempFilePath, {folder: "test"}, async(err, result)=>{
            if(err) throw err;
            removeTmp(file.tempFilePath)
            res.json({public_id: result.public_id, url: result.secure_url})
        })


    } catch (err) {
        console.log("f")
        return res.status(500).json({msg: err.message})
    }
})

what seems to be the issue?