is there a way i can handle file upload in react - node.js

Question

iam trying to submit these fields to node server from react i can submit rest of the input fields and select options but i cannot upload the photo plus i can upload all fields (including the photo) to the server using POSTMAN
// fields to submit to node server
state = {
data: {
fullName: '',
email: '',
phoneNumber: '',
branchId: '',
jobId: '',
salary: '',
image: '',
// startDate: '',
},
// onChange handler
handleChange = ({ currentTarget: input }) => {
//clone the errors
const errors = { ...this.state.errors }
//validate the input
const errorMessage = this.validateProperty(input)
//
if (errorMessage) errors[input.name] = errorMessage
//
else delete errors[input.name]
//clone the data
const data = { ...this.state.data }
//override the state data with the input value
data[input.name] = input.value
// update the state with the data and errors
this.setState({ data, errors })
}
// submit or onClick handler
doSubmit = async () => {
const { data } = this.state
const fd = new FormData()
fd.append('fullName', data.fullName)
fd.append('email', data.email)
fd.append('phoneNumber', data.phoneNumber)
fd.append('branchId', data.branchId)
fd.append('jobId', data.jobId)
fd.append('salary', data.salary)
fd.append('image', data.image)
// fd.append()
await saveEmployee(fd)
this.props.history.push('/employees')
}

Answer 1

I'm guessing that the image input is a file field?
You are now storing the input#value of the file field but you're actually looking for the input#files[0] value. This contains the reference to the actual file and can be appended to the form.
handleChange = ({ currentTarget: input }) => {
//clone the errors
const errors = { ...this.state.errors }
//validate the input
const errorMessage = this.validateProperty(input)
//
if (errorMessage) errors[input.name] = errorMessage
//
else delete errors[input.name]
//clone the data
const data = { ...this.state.data }
//override the state data with the input value
data[input.name] = input.type === 'file' ? input.files[0] : input.value
// update the state with the data and errors
this.setState({ data, errors })
}

Answer 2

This can be achieved in the following way:
In Server use "multer" to handle uploaded file:
https://expressjs.com/en/resources/middleware/multer.html
Now create an endpoint to handle your file upload.
For instance(server code):
// Import Multer
const multer = require("multer");
// Express
let app = express();
// upload destination
const uploadLocation = multer({ dest: "uploads/" });
// Endpoint
app.post(
"/upload",
// Here pass the name of file that you've set in FormData. In your
// case its "image", as your appending file data as image in your
// code.
uploadLocation.single("image"),
async (req, res) => {
// get file from req
const file = req.file;
// This is your uploaded file
console.log(file);
// You can handle other data here...
res.status(200).send({ path: `uploads/${file.filename}` });
}
);
Now use this endpoint to send your from data.
For instance (client side code in Javascript):
const data = await fetch(
`${process.env.REACT_APP_SERVER_URL}/upload`,
{
method: "POST",
credentials: "include",
headers: {},
// Send your form data like this to server
body: formData,
}
);
const { path } = await data.json();
// This is your path of uploaded file
console.log(path)