How to pass array to formdata and save as array in react.js

Question

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.IncomingForm();
  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 }));

You cannot set an array value in formData. Read the docs.

Ajeet Shah
– Ajeet Shah

2021-04-24 20:00:30 +00:00
Commented Apr 24, 2021 at 20:00 — Ajeet Shah
– Ajeet Shah, Commented Apr 24, 2021 at 20:00

Iqbal · Accepted Answer · 2021-04-24 18:21:13Z

4

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.

answered Apr 24, 2021 at 18:21

Iqbal

2191 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Riya Yadav Over a year ago

Doing this no data gets added in the form data

Iqbal Over a year ago

try seeing the formData using frmData.getAll('tags[]')

Riya Yadav Over a year ago

It's showing all but nothing is passed while saving the data in DB

Iqbal Over a year ago

then there must be something wrong with the backend

Riya Yadav Over a year ago

I have added the backend above, please check

Collectives™ on Stack Overflow

How to pass array to formdata and save as array in react.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related