Here is the step-by-step guide to send form data using axios post request in React. Refer this article if you need this step-by-step guide.

2. 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.

3. 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.
Moreover, Bosc Tech has a skilled developers who have developed
various react application using React. Hire skilled React developers
from Bosc Tech for your next project.
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 “&.”

4. 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 “<form>” tag. The default
setting works well with the different cases; this attribute is often
missing.

5. 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.
Also, check out our article on 4 ways to Set Input Field After Rendering in
React.

6. 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)

7. 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])

8. 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>

9. 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”,
},
});

10. The third way to set the encoding type is to set the “enctype” in the
“<form>” of a specific form. Axios adopts the following encoding type
in the following way:
<form action=”/api-endpoitn” methot=”POST”, enctype=”multipart/form-date”>

11. 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>

12. 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.

13. 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);
});
});

14. 4. Express Backend:
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.
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.

15. 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.”

16. 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");
});

17. 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:

18. 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.
Source: https://bosctechlabs.com/send-form-data-using-axios-
post-request-react/