i am passing an array to formdata but getting it as string. How can i save it in array only.

tags=["abc", "def", "ghi"]
formData.set("tags",tags);

if i do this at frontend then nothing is getting save at backend

const clickSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: "", loading: true });
    tags.forEach((tag) => formData.append("tags[]", tag));
    createProduct(formData).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          name: "",
          description: "",
        });
      }
    });
  };

the backend code after submitting form

exports.create = (req, res) => {
  console.log("REQ", req.body);
  let form = new formidable.IningForm();
  form.keepExtensions = true;
  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(400).json({
        error: "Image could not be uploaded",
      });
    }
    let product = new Product(fields);
    console.log("P", product);

    if (files.photo) {
      product.photo.data = fs.readFileSync(files.photo.path);
      product.photo.contentType = files.photo.type;
    }

    product.save((err, result) => {
      if (err) {
        return res.status(400).json({
          error: errorHandler(err),
        });
      }
      res.json(result);
    });
  });
};

also the req.body giving empty object,why so i have use

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

i am passing an array to formdata but getting it as string. How can i save it in array only.

tags=["abc", "def", "ghi"]
formData.set("tags",tags);

if i do this at frontend then nothing is getting save at backend

const clickSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: "", loading: true });
    tags.forEach((tag) => formData.append("tags[]", tag));
    createProduct(formData).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          name: "",
          description: "",
        });
      }
    });
  };

the backend code after submitting form

exports.create = (req, res) => {
  console.log("REQ", req.body);
  let form = new formidable.IningForm();
  form.keepExtensions = true;
  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(400).json({
        error: "Image could not be uploaded",
      });
    }
    let product = new Product(fields);
    console.log("P", product);

    if (files.photo) {
      product.photo.data = fs.readFileSync(files.photo.path);
      product.photo.contentType = files.photo.type;
    }

    product.save((err, result) => {
      if (err) {
        return res.status(400).json({
          error: errorHandler(err),
        });
      }
      res.json(result);
    });
  });
};

also the req.body giving empty object,why so i have use

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

• javascript
• node.js
• reactjs
• form-data

• You cannot set an array value in formData. Read the docs. – Ajeet Shah Commented Apr 24, 2021 at 20:00

1 Answer 1

this is not how we pass an array to formData. you have to loop through all the array items and add them to formData one by one.

const frmData = new FormData();
const tags = ["abc", "def", "ghi"];
tags.forEach(tag => frmData.append('tags[]', tag))

So the takeaway here is that when you want to add an array to form data you have to use key name as "key[]" with the array symbol at the end.