How to send formdata with other data in MERN App? - html

Question

I want to save a image to cloudiary from Nodejs in a Mern Application. I have data in such a way that formdata is a field.
I want to send multiple fields from frontend with formdata but whenever I am trying to assign the formdata to my object, it is getting assigned as empty object {}
Code for Component where I have 2 more fields apart from formdata or file input.
import axios from "axios";
import React, { useState } from "react";
function About({ setAboutInfo, touched = false, setInvalid }) {
const [about, setAbout] = useState({
name: "",
objective: "",
imageUrl: {},
});
const handleChange = (e) => {
var formData = new FormData();
if (e.target.name == "imageUrl") {
formData.append("imageUrl", e.target.files[0]);
setAbout({ ...about, imageUrl: formData });
} else setAbout({ ...about, [e.target.name]: e.target.value });
setAboutInfo(about);
if (!(about.name && about.objective)) {
setInvalid((prev) => ({ ...prev, about: true }));
} else {
setInvalid((prev) => ({ ...prev, about: false }));
}
};
return (
<div className="ext-container row pb-0">
<form encType="multipart/form-data">
<div className="col-md-6">
<label className="my-labels" htmlFor="">
Name
</label>
<input
value={about.name}
name="name"
type="text"
onChange={handleChange}
className={"my-inputs "}
placeholder="Enter complete name"
/>
</div>
<div className="col-md-6">
<label className="my-labels" htmlFor="">
Profile Pic
</label>
> <input
> name="imageUrl"
> type="file"
> accept="image/*"
> onChange={handleChange}
> className={"my-inputs "}
> placeholder="Choose profile pic"
> />
</div>
<div className="col-md-12">
<label className="my-labels" htmlFor="">
Objective
</label>
<textarea
name="objective"
value={about.objective}
type="text"
onChange={handleChange}
className={"my-inputs "}
rows={4}
placeholder="Enter Objective"
></textarea>
</div>
</form>
</div>
);
}
export default About;
I am sending this data to parent component from setAboutInfo method.
Parent component making request to backend
const saveData = (e) => {
e.preventDefault();
setTouched(true);
console.log({
...about,
});
// console output
**
{
name: 'Jack', objective: "Jack's objective", imageUrl: FormData}
imageUrl: FormData {}
name: "Jack"
objective: "Jack's objective"
[[Prototype]]: Object
}
**
axios
.post(
"/resume",{...about})
.then((response) => {
if (response.status == 201) {
console.log(response);
success("Data saved successfully");
}
})
.catch((e) => console.log(e));
};
In backend I am getting this as body of Post request
{ name: 'Jack', objective: "Jack's objective", imageUrl: {} }

Answer 1

You have to append whole body in formdata and send send form data to the api.
const saveData = (e) => {
e.preventDefault();
setTouched(true);
console.log({
...about,
});
// console output
**
{
name: 'Jack', objective: "Jack's objective", imageUrl: FormData}
imageUrl: FormData {}
name: "Jack"
objective: "Jack's objective"
[[Prototype]]: Object
}
**
let formData = new FormData();
formData.append("imageUrl", about.imageUrl);
formData.append("name", about.name);
formData.append("objective", about.objective);
axios
.post(
"/resume",formData )
.then((response) => {
if (response.status == 201) {
console.log(response);
success("Data saved successfully");
}
})
.catch((e) => console.log(e));
};
For onchange method don't save in form data.
const handleChange = (e) => {
if (e.target.name == "imageUrl") {
setAbout({ ...about, imageUrl: e.target.files[0]});
} else setAbout({ ...about, [e.target.name]: e.target.value });
setAboutInfo(about);
if (!(about.name && about.objective)) {
setInvalid((prev) => ({ ...prev, about: true }));
} else {
setInvalid((prev) => ({ ...prev, about: false }));
}
};