multer gives me error "originalname" of undefined - reactjs

Question

I'm trying to make an image uploader but I'm getting this error whenever I try to upload an image. i think all the configurations I've made with multer are alright so I can't seem to find where is the error.
I'm doing this with the multer module. If anyone can help me I would really appreciate it as I've been trying to solve this error for quite a while and I keep getting the same error.
server side:
const express = require('express');
const router = express.Router();
const multer = require('multer');
const Clients = require('../models/clients.js')
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./uploads")
},
filename: (req, file, callback) => {
callback(null, file.originalname)
}
})
const upload = multer({storage: storage})
router.route('/').get((req, res) => {
Clients.find()
.then(client => res.json(client))
.catch(err => res.status(400).json('Error:' + err))
})
router.route('/add', upload.single("articleimage")).post((req, res) => {
const newClient = new Clients({
image: req.file.originalname,
firstName: req.body.firstName,
lastName: req.body.lastName,
weight: req.body.weight,
BMI: req.body.BMI
})
newClient.save()
.then (() => res.json(newClient))
.catch(err => res.status(400).json('error' + err))
})
module.exports = router
Client side:
import React, {useState} from 'react'
import FileBase64 from 'react-file-base64';
import axios from 'axios'
function AddClient() {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [weight, setWeight] = useState('')
const [BMI, setBMI] = useState('')
const [image, setImage] = useState('')
const selectedFile = (e) => {
setImage(e.target.files[0])
}
console.log(image)
const submitForm = (e) => {
e.preventDefault()
const formData = new FormData()
formData.append("image", image)
formData.append("firstName", firstName)
formData.append("lastName", lastName)
formData.append("weight", weight)
formData.append("BMI", BMI)
axios.post('http://localhost:4000/clients/add', formData)
.then(res => console.log(res))
}
console.log(firstName)
return (
<div>
<form class="w-full max-w-lg" onSubmit={submitForm} encType="multipart/form-data">
<div class="flex flex-wrap -mx-3 mb-6">
<input type="file" filename="articleimage" onChange={selectedFile}/>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
First Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setFirstName(e.target.value)} placeholder="First Name" />
<p class="text-red-500 text-xs italic">Please fill out this field.</p>
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
Last Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setLastName(e.target.value)} placeholder="Last Name" />
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
Weight
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />
<p class="text-red-500 text-xs italic">Please fill out this field.</p>
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
Body Mass Index (BMI)
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Client</button>
</div>
</form>
</div>
)
}
export default AddClient

Answer 1

On the client-side, you are appending the formData as formData.append("image", image) but on the server-side, you are writing 'articleimage' in the upload middleware.
Change it to 'image' i.e. same as the client-side.
Also, I would suggest that the controller code for uploading/saving the image and saving the name of the image in the database should be separated.
You should create a new controller function that just saves the image on your server and returns the name of the image. Call this controller function through an API call in the selectedFile callback function. And then, save the returned name of the image in the state and finally proceed to submit the form and save the data in the database.