send form data to server with api in javascript

Question

my task is to make a form to send an Excel file and a message to the server, and I have a postman collection file that contains this array of objects:

"formdata": [
             {
                "key": "message",
                "value": "hello",
                "type": "text"
             },
              {
                "key": "users",
                "type": "file",
                "src": "path-to-.xlsx"
              }
            ]

and this is my simple form:

<div class="landing">
    <div class="intro-text">
      <div class="form-style-3">
        <form id="msgform" method="POST">
          <fieldset>
            <legend>Message</legend>
            <label for="file">
              <span>File
                <span class="required">*</span>
              </span>
              <input type="file" name="file" id="input"
                accept="..csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            </label>
            <label for="message">
              <span>Message
                <span class="required">*</span>
              </span>
              <input name="message" id="message" type="text" />
            </label>
            <label>
              <input type="submit" value="Submit" />
            </label>
          </fieldset>
        </form>
      </div>
    </div>
  </div>

and this is my API connection function:

const url = 'path-to-api-url';
const form = document.getElementById('msgform');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  const formDataSerealized = Object.fromEntries(formData);
  console.log(formDataSerealized);

  try {
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify(formDataSerealized),
      headers: {
        'Content-type': 'application/json',
      },
    });
    const json = await response.text();
    console.log(json);
  } catch (e) {
    console.error(e);
  }

});

My problem is when submitting I have in the console this error

{"errors":[{"message":"message not found"}]}

What Should I do?

score 0 · Answer 1 · answered Apr 27 '21 at 02:35

0

You should adjust your code to not use JSON formatting for the content. That is the encoding that would be used if you posted the form without JS.

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  const formDataSerealized = Object.fromEntries(formData);
  console.log(formDataSerealized);

  try {
    const response = await fetch(url, {
      method: 'POST',
      body: formDataSerealized,
      headers: {
        'Content-type': 'multipart/form-data',
      },
    });
    const json = await response.text();
    console.log(json);
  } catch (e) {
    console.error(e);
  }
});

EDIT if you are sending a file in your form submission then use the content type multipart/form-data instead.

answered Apr 27 '21 at 02:35

Glenn Ferrie

10,290
3
42
73

thanks for your reply, I made what you suggest but I have the same error with `422 (Unprocessable Entity) {"errors":[{"message":"message not found"}]}`. – william david Apr 27 '21 at 02:42
what is the implementation on the server side. what is expected? your formdata (from postman collection) is not formatted well. it is formatted like a JS object. Postman has options for FormData in the request body – Glenn Ferrie Apr 27 '21 at 03:20
see this: https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data – Glenn Ferrie Apr 27 '21 at 03:23

send form data to server with api in javascript

1 Answers1