node.js - req.file is undefined while using multer for image upload

Question

I'm getting req.file undefined error while uploading an image using multer. I am sending my image from react to nodejs using FormData. I have looked almost every solution of Stack Overflow but I'm not able to fix the issue.

my React code for sending file:

const data = new FormData();
    data.append('profile',e.target.files[0]);
    axios.post('/imagefilter', data).then(res=>console.log(res)).catch(err=>console.log(err))

input tag where I'm receiving the file:

<input type="file" onChange={(e) => { onChange(e) }} />

nodejs server code:

 const storage = multer.diskStorage({
destination: (req,file,cb) => {
    console.log(req.files);
    cb(null,path.join(__dirname, './uploads'))
},
filename: (req,file,cb) => {
    cb(null,file.originalname);
}

})

post Route:

router.post(`/imagefilter`,upload.single('profile'),(req, res) => { console.log(req.file)})

I'm not able to figure out the error, I've wasted almost 24 hours fixing this error.

question from:https://stackoverflow.com/questions/65935860/req-file-is-undefined-while-using-multer-for-image-upload

Answer 1

i think when you call api you need to add Content-Type": "multipart/form-data in header.