How to Send Form Data Using Axios Post Request In React

React is the leading programming language used by developers globally. More than 8,787 industry leaders were using React.js in 2020. Hence, multiple developers prefer to go for React and Javascript. Multiple encoding types can be used for non-file transfers.

Form data:

One of the encoding types allows the files to be incorporated into the required form data before being transferred to the server for processing. Some other encoding types used for the non-file transfers include text/ plain, application/x-www-form-urlencoded, etc.

While multipart or form-data allows the files to be included in the form data, text/ plain sends the data as plain text without encoding. It is used for debugging and not for production. The application/x-www-form-urlencoded encodes the data as query string – separating key – value pairs assigned with “ = “ and other symbols like “&.”

All these encoding types can be added to the HTML using the “enctype” attribute in the following way:

<form action="/path/to/api" method="post" enctype="multipart/form-data"></form>

These encoding types are used with HTML “

” tag. The default setting works well with the different cases; this attribute is often missing.

Axios

Axios is the promise-based HTTP client for Node.js and browsers. It makes XMLHttpRequests from the browser and HTTP requests from Node.js. Further, it supports the “Promise” API and can intercept responses, requests, etc. Axios can cancel requests, transform requests, and response data, automatically transform for JSON data, and offer client-side support to protect against “XSRF.”

Axios is dependent on a native ES6 Promise implementation to be supported. It is easy for the users to polyfill if the system doesn’t support the ES6 Promises. Further, it is heavily inspired by the “$ http service” offered in “Angular JS.” More or less, Axios is an effective method to offer a single “$ htttp” like service for using it outside AngularJS.

Browser support: Edge, IE, Opera, Safari, Mozilla Firefox, Google Chrome, etc.

Common request methods:

Some of the common request methods in Axios are:

• axios.patch(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.post(url[, data[, config]])
• axios.options(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.get(url[, config])
• axios.request(config)

Common instance methods:

Some of the available instance methods in Axios are:

• axios#getUri([config])v
• axios#patch(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#post(url[, data[, config]])
• axios#options(url[, config])
• axios#head(url[, config])
• axios#request(config)
• axios#delete(url[, config])
• axios#get(url[, config])

1. Installing Axios:

Axios is commonly used to send HTTP requests over the “fetch()” command. For different Node projects, it is easy to install Axios using “npm.”

npm install axio
or
yard add axios

The other way to install Axios is to include it in CDN directly or download the files to the system. The library in markup is included like:

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

2. Setting “enctype” with HTML and Axios:

It is important to set the encoding type to send the multipart data or files through form data. It is easy to set the default global encoding type with Axios, which enforces all Axios requests in multipart/ form – data encoding type in the following way:

axios.defaults.headers.post[‘Content-Type’] = ‘multipart/form-date’;

The encoding type can be defined for separate individual requests by altering the “headers” in the following way:

axios.post(“api/path”, formData, {
    headers: {
    “Content-type”: “multipart/form-date”,
},
});

The third way to set the encoding type is to set the “enctype” in the “

” of a specific form. Axios adopts the following encoding type in the following way:

<form action=”/api-endpoitn” methot=”POST”, enctype=”multipart/form-date”>

3. Axios and Express:

Let us consider the case where a simple form with two inputs is created in Axios and Express. One is used for the user to submit their name, and the other one is used to select the profile image in the following way:

        Name : <input type="text" name="username" placeholder="Enter Username">
        <br> <br>
        Select a file :
        <input type="file" name="userDp" placeholder="ChooseProfile Picture">
        <br> <br>
        <button type="submit">
          Submit
        </button>

If Axios is not used in the program, the default set of events unfolds. Pressing the “Submit” button will send a “POST” request to the “/update – profile” endpoint of our server. This default behaviour can be overridden by attaching an event listener to the button and preventing the unfolding of the default events.

A simple example of attaching the event listener, preventing the default behaviour, and sending our form data using Axios is mentioned below. It is easy to customize the request before sending it out and altering the headers as all Axios requests are entailed synchronically.

const form = document.querySelector("form");
  if (form) {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const formData = new FormData(form);
      axios
        .post("/update-profile", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    });

The request is forwarded to the “http: / / localhost : 5000 / update – profile” endpoint with dedicated upload support files when the form is filled and the “Submit” button is clicked. It all comes down to the endpoint, which receives and processes the request.

4. Express Backend:

The REST API is spun using Express.js for the backend support. Hence, developers can focus on development than on the different setups. This technique sets the server and handles requests. Express is expandable with middleware and works on minimalist coding. It becomes easy to expand the core functionality of Express by installing simple or complex middleware.

Express can be installed using “npm.” The “express – fileupload” middleware can be used for simple file handling with Express. The simple technique for the same is:

npm install express express-fileupload

Let us start a server and define the endpoint that accepts the “POST” to “/update – profile.”

const express = require("express");
var fileupload = require("express-fileupload");
const app = express();
app.use(fileupload());
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.post("/update-profile", (req, res) => {
  let username = req.body.username;
  let userPicture = req.files.userPicture;
  console.log(userPicture);
  res.send(`
    Your username is: ${username}<br>
    Uploaded image file name is ${userPicture.name}
  `);
});
app.listen(3001, () => {
  console.log("Server started on port 3001");
});

The “req” request passed through the request handler carries data sent by the form. The body contains all data from the different set fields like the “username.” All the files created are located in the “req” object under the “files” field. Further, it is easy to access the input “username” through “req . body . username.” The uploaded files can be accessed using “req . files . userPicture.”

The following response is received in the browser console when the form is submitted with the HTML page:

If information like encoding type, file name, and other information is required, it is easy to log the “req. files .userPicture” to the console.

Wrapping Up:

Hence, it is easy to understand the Axios post request to send form data. Axios is the leading asynchronous HTTP library that is used to send post requests carrying the file or multipart data. The REST API is used to handle the request. It accepts the incoming file and other form data using the “enctype” attribute. This attribute is set with Axios.