Home / Working with APIs / POST form data (also including a file) using Axios

POST form data (also including a file) using Axios

OpenJavaScript 0

Last updated: November 20, 2022.

The Axios HTTP client can be used to POST form data to a specified URL endpoint.

In this post, we show you how to prepare the form data using the FormData object constructor and construct a POST requesting using Axios.

Table of contents

Importing Axios

Axios is a third-party library and so must be imported into your project to use it.

You can install Axios into your project folder from the command line using:

$ npm install axios

You’ll then want to use either require() (Node.js) or import() (in the browser) syntax at the beginning of your script to make it available.

Alternatively, if running JavaScript in the browser, you can use a CDN link in the <head> tag of your document:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

Preparing the payload

Handling the submit event

We’ll be working with the following HTML form. It includes both text input and user-selected file input:

<form id="form">
  <input type="text" name="first-name">
  <input type="text" name="last-name">
  <input type="file" name="photo" accept="image/*">
  <button type="submit">Submit</button>
</form>

In JavaScript, select the form and add an event listener to it, listening out for a submit event.

Make sure the submit button is of type submit so that it triggers this form event.

You’ll want to start handling the event by calling preventDefault() on the available event parameter, which prevents an automatic HTML-based submission from occurring. Instead, we are handling the submission using Axios and JavaScript.

const form = document.getElementById('form');

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

});

Inserting form data into FormData object

Next, you’ll want to use the native FormData object constructor to create a new object of its type.

A FormData object formats the payload you insert into it in the same format as a regular HTML form. A great feature of containing a payload in a FormData object is that request headers and data encoding will be configured automatically.

One way to insert data into a FormData object is that pass in the form element into the parentheses when creating a FormData object instance.

Watch out, though, because using this method, only data from form input that include a name attribute will be inserted into the FormData object.

const form = document.getElementById('form');

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

  const formData = new FormData(form);
});

You can also add individual bits of data to the FormData object by calling the append() method on it and passing in data in key-value format.

This method allows you to include data in the payload that wasn’t present in the HTML form. 

const form = document.getElementById('form');

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

  const formData = new FormData();
  formData.append("first-name", form[0].value);
  formData.append("last-name", form[1].value);
  formData.append("photo", form[2].files[0]);
  formData.append("session-id", "12345");
});

Sending the payload using Axios

Now, you’re ready to send the payload in a POST request using Axios.

To specify that this is a POST request, start by calling axios.post().

In the parentheses, pass in the URL endpoint as the first argument. In this example, we use a POST endpoint provided by httpbin.org, a HTTP request and response testing service. If successful, the server response will send you back what you sent for inspection.

As a second argument, pass in the payload.

If successful, the result will be available within the then() method. If unsuccessful, the catch() statement will be triggered. You can read more about the then() and catch() syntax for handling promises here.

const form = document.querySelector("form");

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

  const formData = new FormData(form);

  axios.post('https://httpbin.org/post', formData)
  .then(res => console.log(res))
  .catch(err => console.log(err))
});

Related links

Related Posts:

Tags:
Share:
whatsapp
pinterest
linkedin