file upload with axioso is showing undefined in multer - node.js

Question

I am trying to upload file using react and axios to node backend using multer.
when i use form as :
<form action = '/article/add' method="POST" className = {adminStyle.add_article_form} enctype="multipart/form-data">
<input type='text' className={adminStyle.add_article_input_title} autoComplete = 'off' name='title' placeholder='Title' value = {state.title} onChange={changeHandler}/>
<select name='category' value = {state.category} onChange={changeHandler}>
{options}
</select>
<input type="file" name='thumbnail' className={adminStyle.add_article_input_file} onChange={changeFileHandler}/>
<textarea type = 'text' name='body' className={adminStyle.add_article_textarea} rows='30' cols='100' value = {state.body} onChange={changeHandler}></textarea>
<button type='submit'>Submit</button>
</form>
it works fine but when using axios the file is undefined:
I used axios as:
const [state,setState] = useState({
title: '',
category: 'Choose one',
body: '',
thumbnail: ''
})
const changeFileHandler = (e) => {
setState({ thumbnail: e.target.files[0] })
}
const postArticle = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('thumbnail', state.thumbnail)
axios.post('/article/add', state,config).then(data => console.log(data))
}
<form onSubmit={postArticle} className = {adminStyle.add_article_form} enctype="multipart/form-data">
<input type='text' className={adminStyle.add_article_input_title} autoComplete = 'off' name='title' placeholder='Title' value = {state.title} onChange={changeHandler}/>
<select name='category' value = {state.category} onChange={changeHandler}>
{options}
</select>
<input type="file" name='thumbnail' className={adminStyle.add_article_input_file} onChange={changeFileHandler}/>
<textarea type = 'text' name='body' className={adminStyle.add_article_textarea} rows='30' cols='100' value = {state.body} onChange={changeHandler}></textarea>
<button type='submit'>Submit</button>
</form>
My backend is as follow:
const storage = multer.diskStorage({
destination: path.join(__dirname, '..', '../public/uploads'),
filename: function(req, file, cb){
cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
function checkFileType(file, cb){
// Allowed extension name
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
const mimetype = filetypes.test(file.mimetype);
if(mimetype && extname){
return cb(null,true);
} else {
cb('Error: Images Only!');
}
}
const upload = multer({
storage: storage,
limits:{fileSize: 1000000},
fileFilter: function(req, file, cb){
checkFileType(file, cb);
}
}).single('thumbnail')
router.post('/add',(req, res)=>{
upload(req,res, (err) => {
console.log(req.file)
})
});
can anyone help me with this? I am really stuck. I need to upload the image in the backend.

Answer 1

You are passing state and not formData as the body of the request. You should change this line:
axios.post('/article/add', state,config).then(data => console.log(data))
with this line:
axios.post('/article/add', formData ,config).then(data => console.log(data))