Formidable duplicates fields on each POST request

Question

I have a basic html form that has 2 inputs, email and password. The email input looks like this

<input type="email" placeholder="Email" name="email" required />

and the password input looks like this

<input type="password" placeholder="Email" name="password" required />

In the backend I log the fields that were submitted after parsing the form using formidable

form.parse(req, async (err, fields, files: any) => {
    if (err) {
      console.log(err);

      return res.status(500).json({
        msg: "There was an error while processing upload"
      });
    }

    console.log(fields);

   return res.json({msg: "done"})
  });

This works perfectly fine, but there something weird happening and I'm not too sure why. On each request this backend takes, the fields will duplicate on each request. For example, if I submitted a form with the email value as [email protected] and password as 123 the field log in the backend would look like this

{
  email: [
    '[email protected]'
  ],
  password: [
    '123'
  ]
}

This is fine, but if there was another post request to the backend it would duplicate the fields, so for example this time if the email was [email protected] and the password was abc the backend fields would look like

{
  email: [
    '[email protected]',
    '[email protected]'
  ],
  password: [
    'abc',
    'abc'
  ]
}

It will essentially create copies of the form value for each subsequent post request, so if this was the 50th form submission the fields log would have and array of 50 emails and passwords all of which are exactly the same. Why is this happening?

Answer 1

I was facing a similar issue, found out that the form variable which is being used here for form.parse should be initialised for every new request.

I had this code earlier which was handling me express request

export function incomingFormRouteHandler(
  controllerFn,
) {
  const form = new IncomingForm(); // This was outside the returning function
  return async (req: Request, res: Response) => {
    return form.parse(req, (err, fields, files) => {
      if (err) {
        await Promise.reject(err)
      }
      const controller = controllerFn();
      controller.execute(Object.assign({}, req, { files, fields }), res);
    });
  };
}

Turns out that the IncomingForm should have been present inside the function which is returned. I modified the code to the following:

export function incomingFormRouteHandler(
  controllerFn,
) {
  return async (req: Request, res: Response) => {
    const form = new IncomingForm(); // Shifted this to inside of the returning function
    return form.parse(req, (err, fields, files) => {
      if (err) {
        await Promise.reject(err)
      }
      const controller = controllerFn();
      controller.execute(Object.assign({}, req, { files, fields }), res);
    });
  };
}

This resolved the issue.