Extra data along with form data in action

[mayurwankhade96]

i am doing electron js project, currently i want to send a payload like
{
"email":"",
"secret":"",
"deviceInfo": {
some other info
}
}

but i am getting only email and secret in form data and device info is there in my component. how should i send device info to action

[kiliman]

Here's an example that shows how to modify the form post payload. In this example, I convert the data to JSON format.

The trick is to add your own onSubmit handler and using the useSubmit hook, to imperatively submit the form.

export async function action({ request }: ActionFunctionArgs) {
  // post data will now be in JSON format
  const data = await request.json();
  return json(data);
}

export default function Index() {
  const submit = useSubmit();
 
  // override existing submit handler to add device info and 
  // convert to JSON payload
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
    // get current form data
    const formData = new FormData(e.currentTarget);
    // convert it to an object and add device info
    const data = {
      ...Object.fromEntries(formData),
      deviceInfo: {
        agent: navigator.userAgent,
      },
    };
    // submit the new data as post and JSON type
    submit(data, { method: 'post', encType: 'application/json' });
    // prevent the default behavior of posting the form data
    e.preventDefault();
  };
  //...
}

https://remix.run/docs/en/main/hooks/use-submit

⚡️ StackBlitz https://stackblitz.com/edit/remix-run-remix-xr5li8?file=app%2Froutes%2F_index.tsx

[mayurwankhade96]

Thank you! will give it a try now and let you know.