Sending formData to API in reactjs

Question

I am using html2canvas to convert HTML to images.
So whenever the user submits the form, I am trying to send the image as blob and other details to the API using formData.
I am sending formData to the API to process the submitted data.
When user click on submit button, below code is responsible.

function handleReport(target = 'body') {
    html2canvas(document.querySelector(target))
      .then((canvas) => {
        let pngUrl = canvas.toDataURL(); // PNG is the default
        fetch(pngUrl)
          .then((res) => res.blob())
          .then((blob) => {
            const formData = new FormData();
            formData.append('images', [blob]);

            // textarea content
            formData.append('description', textAreaValue);

            // user device info
            formData.append('device[platform]', device.payload.platform);
            formData.append('device[name]', device.payload.name);
            formData.append('device[version]', device.payload.version);
            formData.append('device[ip]', device.payload.ip);
            formData.append('device[id]', device.payload.id);
            formData.append('device[app_version]', device.payload.app_version);
            formData.append('device[device_token]', device.payload.device_token);

            dispatch(actions.contactUs(util.getApiToken(), util.getToken(), formData));
          });
      })
      .catch((error) => {
        console.log(error);
      });
  }

action definition :

export function contactUs(apitoken, token, payload) {
  return {
    [RSAA]: {
      endpoint: `${API_ENDPOINT}/contact-us?api_token=${apitoken}`,
      headers: {
        ...AUTH_HEADERS,
        Authorization: `Bearer ${token}`,
      },
      method: 'POST',
      body: payload,
      // body: JSON.stringify(payload),
      types: [
        types.CONTACT_US_REQUEST,
        types.CONTACT_US_RECEIVE,
      ],
    },
  };
}

Given below is the screenshot (not full screenshot) of payload (what user sent after clicking submit button) in Chrome browser

and this is the response I am getting from API

What is my problem !
I am sending all required keys (refer formData) but don't why am I getting error like :

description field is required

what's your tech stack on the server? how is the payload being desterilized on the server, what's the shape of the object there? — Sangeet Agarwal
– Sangeet Agarwal, Commented Dec 27, 2021 at 15:11
I want to ask you that is there any header property I am missing as I am using formData() ? — Abhishek kamal
– Abhishek kamal, Commented Dec 27, 2021 at 15:33

Abhishek kamal · Accepted Answer · 2021-12-28 10:05:41Z

1

My header content is -

AUTH_HEADERS = {
  'X-Authorization': X_AUTHORIZATION,
  'Content-Type': 'application/json',
};

I just resolved my issue by removing 'Content-Type': 'application/json' which I was sending.

Now I am sending request to API without header.

headers: {
          'X-Authorization': X_AUTHORIZATION,
          Authorization: `Bearer ${token}`,
        },

Now everything is working is fine.

answered Dec 28, 2021 at 10:05

Abhishek kamal

3295 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Sending formData to API in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related