React sending array of objects as form Data

Question

I have currently created a nodejs api where a user can send data about their career. They can send text and an uploaded image.

The data is sent as follows and I have been successful with sending via postman

{
    "employee": "user",
    "positionHeld": [{
        "yearPostitionHeld": "1995 - 2000",
        "positionHeldTitle": "Manager"
    },
    {
        "yearPostitionHeld": "2000 - Present",
        "positionHeldTitle": "Assocaite Manager"
    }],
    "address": "Company Address",
    "responsibilities": ["Responsibility 1", "Responsibility 2", "Responsibility 3"]
}

I have created a front end page with ReactJS so the user can send the data as above by filling in input fields.

I set the user input via the useState Hook

const [formData, setFormData] = useState({
    companyName: "",
    year: "",
    positionHeld: [
      {
        positionHeldYear: "",
        positionHeldTitle: "",
      },
    ],
    address: "",
    responsibilities: "",
  });

via an onChange function

const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

I also hanle the file upload

const [fileData, setFileData] = useState();

const handleFilechange = (e) => {
    setFileData(e.target.files[0]);
  };

I first tried to send the data as the formData but the file/image always appeared in req.body and not req.file and therefore I was unable to obtain the file path.

As a solution to the file issue I then create a new formData const completeFormData = new FormData(); and appending this

const year = formData.positionHeldYear;
    const title = formData.positionHeldTitle;
    setFormData({...formData, positionHeld: {positionHeldYear: year, positionHeldTitle: title}})

completeFormData.append("companyName", formData.companyName);
    completeFormData.append("year", formData.year);
    completeFormData.append("positionHeld", formData.positionHeld); // this needs to send the array of objects
    completeFormData.append("address", formData.address);
    completeFormData.append("responsibilities", formData.responsibilities);
    completeFormData.append("image", fileData);

I am unsure if it is possible to send an array of objects as the new FormData such as the

"positionHeld": [{
        "yearPostitionHeld": "1995 - 2000",
        "positionHeldTitle": "Manager"
    },
    {
        "yearPostitionHeld": "2000 - Present",
        "positionHeldTitle": "Assocaite Manager"
    }],

When creating the new form data as above when the req.body comes to the backend the positionHeld displays as positionHeld: [object, Object] when doing a console log

How is it best to manage sending data with nest array of object strings and image uploads?

I might have gone down the wrong route with this, so hoping someone can point me in the right direction to send body and a file to confirm as my object

{
    "employee": "user",
    "positionHeld": [{
        "yearPostitionHeld": "1995 - 2000",
        "positionHeldTitle": "Manager"
    },
    {
        "yearPostitionHeld": "2000 - Present",
        "positionHeldTitle": "Assocaite Manager"
    }],
    "address": "Company Address",
    "responsibilities": ["Responsibility 1", "Responsibility 2", "Responsibility 3"]
}

Answer 1

One way of sending an array in FormData is to serialize it:

completeFormData.append("positionHeld", JSON.stringify(formData.positionHeld));

Then, on the backend, you can parse it with JSON.parse().