Issue while using FormData in httpRequest method

[vlgunarathne]

Describe the issue:

An error gets thrown when we try to use the FormData() object to attach the data in Form Data format to a PUT request in the httpRequest method.

How to reproduce:

Asgardeo React SDK version : "@asgardeo/auth-react": "^0.2.6",

Sample code:

  const { httpRequest } = useAuthContext();
  const formData = new FormData();
  formData.append('name', 'john');
  httpRequest({
    url: 'https://red-dream-592.getsandbox.com:443/putuser',
    method: 'PUT',
    data: formData,
  })
    .then((response) => {
      console.log({ response });
    })
    .catch((err) => {
      console.log({ err });
    });

Error:

err: DOMException: Failed to execute 'postMessage' on 'Worker': FormData object could not be cloned. at d (https://localhost:3000/static/js/vendors~main.chunk.js:7962:28) at Object.httpRequest (https://localhost:3000/static/js/vendors~main.chunk.js:8033:37) at _l.<anonymous> (https://localhost:3000/static/js/vendors~main.chunk.js:8367:107) at Generator.next (<anonymous>) at o (https://localhost:3000/static/js/vendors~main.chunk.js:2426:19)
code: 25
message: "Failed to execute 'postMessage' on 'Worker': FormData object could not be cloned."
name: "DataCloneError"

Expected behavior:

Environment information (Please complete the following information; remove any unnecessary fields) :

• Product Version: [e.g., IS 5.10.0, IS 5.9.0]
• OS: [e.g., Windows, Linux, Mac]
• Database: [e.g., MySQL, H2]
• Userstore: [e.g., LDAP, JDBC]

---

Optional Fields

Related issues:

Suggested labels:

[thivi]

The FormData object cannot be cloned yet so you cannot send this as a message to a web worker. I would recommend converting the FormData object into a JS object before assigning it to the data attribute.

const data = {};
formData.forEach((value, key)=> {
    data[key] = value;
});

[vlgunarathne]

Thanks @thivi. The requirement was to send the payload as Form Data to the backend REST API layer as some of the APIs expect the payload in that format. Anyway as a workaround, we could add the following header to the request to convert the payload type to form data.

'Content-Type': 'application/x-www-form-urlencoded'

Thanks!

[Hareendran7]

This particular backend REST API only accepts content type of multipart/form-data. So from the application we will need to send FormData object as the payload.

@thivi Appreciate if you could consider supporting this requirement in the SDK level

[thivi]

A solution to this was implemented by asgardeo/asgardeo-auth-spa-sdk#60 and #63.
You can now pass your data as a JavaScript object and set the shouldEncodeToFormData attribute to true. The SDK will encode the data into a FormData object before dispatching the network request.

Example:

httpRequest({
    url: "https://localhost:5000",
    method: "POST",
    data: { key: "value" },
    shouldEncodeToFormData: true
 }).then((response) => {
      console.log(response);
});

[Hareendran7]

A solution to this was implemented by asgardeo/asgardeo-auth-spa-sdk#60 and #63. You can now pass your data as a JavaScript object and set the shouldEncodeToFormData attribute to true. The SDK will encode the data into a FormData object before dispatching the network request.

Example:

httpRequest({
    url: "https://localhost:5000",
    method: "POST",
    data: { key: "value" },
    shouldEncodeToFormData: true
 }).then((response) => {
      console.log(response);
});

The above resolves our issue. Thanks @thivi for the prompt solution.