javascript - Netlify form-data returns Incoherent String

Question

I am trying to send form-data from my react app and recieve it through netlify's handler function and then store to a database but it return something like this when i console log inside the handler function

exports.handler = async function (event, context, callback) {
  console.log("datas", JSON.stringify(event.body));
//   expected :
//   John Doe
//   A John Doe etc...
}

Console.log:

"------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="name"

John Doe

------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="caption"

A john doe

------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="description"

A John from doe like a jane doe

------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="category"

Anonymous

------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="ofClass"

1

------WebKitFormBoundaryaA1pY4UOPV93ouab
Content-Disposition: form-data; name="endanger"

8

------WebKitFormBoundaryaA1pY4UOPV93ouab--
"

As you can imagine it being a pain to send this to the db. I researched netlify documentation at tried some of it but I keep arriving at a syntax error when using JSON.parse. I tried something like this:

exports.handler = async function (event) {
  const { content, destination } = JSON.parse(event.body);
  console.log(`Sending PDF report to ${destination}`);
...
}

I was expecting it to be in an {object} which can be easily destructured perhaps with formidable(nodejs) and sent to the database I keep getting error using the JSON.parse method.

More info below:::

Form sent with react app:

addData(formData)
    .then(data => {
        setValues({
          ...values,
          name: '',
          description: '',
          photo: '',
          error: "",
          loading: false,
          createdProduct: name
        })
    })
    .catch(error => setValues({...values, error: error})

addData function imported from apis folder:::

export const addData = async(bodyFormData) => {
  await fetch('/.netlify/functions/addData', {
    method: 'POST',
    headers: {
      Accept: "application/json"
    },
    body: bodyFormData
    })
    .then((result) => console.log(result))
    .catch((error) => console.error(error));

I have already show the netlify handler function above... I know their other easier methods to do this, but I must use netlify to pass through this any support will be appreciated

question from:https://stackoverflow.com/questions/65643939/netlify-form-data-returns-incoherent-string

Answer 1

Waitting for answers