How to post a file from a form with Axios?
Last Updated :
10 Sep, 2020
In this article, we are going to discuss making POST requests with form data using the Axios library. Axios is a Promise based HTTP client that can be used for the web as well as for Node.JS development. However, in this article, we are going to strictly refer to client-side use of Axios.
To start off, we need to add axios to our development by using a CDN link :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> </script>
In order to use extract data from our form, we are going to use the FormData() method. The formdata method converts the data input in the form in the form of key-value pairs to create a multipart/form-data object.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<h3 style="color:green; font-size:25px;">
Geeks For Geeks
</h3>
<form>
<input name="first-name"/><br>
<input name="last-name"/><br>
<input name="address"/><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
|
Output:
Axios Post Request Syntax
There are two ways to make an axios post request :
- Standard post request:
axios.post(url, data).then(callbackFn()).catch(callbackFn(err))
url : The request url for HTTP POST.
data : An object containing the POST data
callbackFn() : Callback functions to handle the promise.
Post Request with a configuration object
-
axios({
method : ‘post’,
url : url,
data : data
headers : headers
}).then(callbackFn()).catch(callbackFn())
method : specifies the HTTP method
data : an object containing the POST data.
headers(optional) : An object to specify the headers associated with the request.
Javascript Code to send form data to servers :
window.addEventListener('load', ()=>{
const form = document.querySelector('form');
form.addEventListener('submit', (e)=>{
e.preventDefault();
let data = new FormData(form);
axios({
method : 'post',
url : '/',
data : data,
})
.then((res)=>{
console.log(res);
})
.catch((err) => {throw err});
});
});
|
Testing the Axios request with a mock rest API:
Front End Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<script src=
integrity=
"sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg=="
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<h3 style="color: green; font-size: 25px;">
Geeks For Geeks
</h3>
<form>
<input name="first-name" /><br />
<input name="last-name" /><br />
<input name="address" /><br />
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
window.addEventListener("load", () => {
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
let data = new FormData(form);
console.log(data);
axios({
method: "post",
url: "/",
data: data,
})
.then((res) => {
console.log(res);
})
.catch((err) => {
throw err;
});
});
});
</script>
</body>
</html>
|
Code for the Node.js based mock REST API:
const express = require('express');
const formidable = require('express-formidable');
const app = express();
app.use(express.static(__dirname+'/index.html'));
app.use(formidable());
app.get('/', (req, res)=>{
res.sendFile(__dirname+'/index.html');
});
app.post('/', (req, res)=>{
console.log(JSON.stringify(req.fields));
});
app.listen('3000', ()=>{
console.log('listening to port');
});
|
Sample Request Data:
Output in console:
{"first-name":"Geeks", "last-name":"Geeks", "address":"Noida"}
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...