axios post request to send form data

And then add the fields to the form you want to send: You can post axios data by using FormData() like: And then you can use axios post method (You can amend it accordingly) In my case, the problem was that the format of the FormData append operation needed the additional "options" parameter filling in to define the filename thus:

This is our Splunktool team suggestion ✌, we tried and its working fine

axios({
      method: 'post',
      url: 'myurl',
      data: bodyFormData,
      headers: {
         'Content-Type': 'multipart/form-data'
      }
   })
   .then(function(response) {
      //handle success
      console.log(response);
   })
   .catch(function(response) {
      //handle error
      console.log(response);
   });

2._

var bodyFormData = new FormData();

3._

bodyFormData.append('userName', 'Fred');

5._

axios({
      method: "post",
      url: "myurl",
      data: bodyFormData,
      headers: {
         "Content-Type": "multipart/form-data"
      },
   })
   .then(function(response) {
      //handle success
      console.log(response);
   })
   .catch(function(response) {
      //handle error
      console.log(response);
   });

In my case I had to add the boundary to the header like the following:

const form = new FormData();
form.append(item.name, fs.createReadStream(pathToFile));

const response = await axios({
   method: 'post',
   url: 'http://www.yourserver.com/upload',
   data: form,
   headers: {
      'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
   },
});

Suggestion : 2

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. Axios is commonly used to send HTTP requests over the “fetch()” command. For different Node projects, it is easy to install Axios using “npm.” These encoding types are used with HTML “<form>” tag. The default setting works well with the different cases; this attribute is often missing.

1._

npm install axio
or
yard add 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”,
   },
});

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

Suggestion : 3

In this guide, we'll take a look at how to asynchronously send files and other form data with Axios to a Node.js (Express) server, as well as how to receive this data in the backend for processing. Now, let's start up a server and define an endpoint that accepts our POST request to /update-profile: In this guide, we've taken a look at the enctype attribute and covered how it works. We've then explored how to set the enctype with Axios - a popular asynchronous HTTP library, and send POST requests containing multipart/file data.

And any of this can be added to an HTML form tag via the (optional) enctype attribute:

<form action="/path/to/api" method="POST" encytpe="ENCTYPE_HERE">
</form>

To use Axios in your Node projects - you can easily install it via npm:

$ npm install axios
# OR
$ yarn add axios

Alternatively, you can include its CDN directly (or download its files to your local machine) and include the library in your markup as follows:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

This enforces all Axios requests to be of multipart/form-data encoding type. Alternatively, you can define the type for each individual request, by altering the headers:

axios.post("/path/to/api", data, {
   headers: {
      "Content-Type": "multipart/form-data",
   },
});

Or you can just set the enctype attribute in the <form> tag of a specific form, and Axios will simply adopt that form's encoding type:

<form action="/some-endpoint" method="HTTP_METHOD" enctype="multipart/form-data">
</form>

Suggestion : 4

Modern browsers have a built-in FormData class that you can use to generate HTTP POST bodies formatted in the same way as if you submitted an HTML form. You can then pass the FormData class instance transparently to Axios' post() function. Node.js doesn't have a built-in FormData class, you need to use the form-data npm module. Suppose your Express server has a /upload endpoint that uses Formidable to handle form uploads. Below is an example endpoint that just sends the path of the uploaded file back.

1._

app.post('/upload', function(req, res) {
   const form = new formidable.IncomingForm();
   // Parse `req` and upload all associated files
   form.parse(req, function(err, fields, files) {
      if (err) {
         return res.status(400).json({
            error: err.message
         });
      }
      const [firstFileName] = Object.keys(files);

      res.json({
         filename: firstFileName
      });
   });
});

2._

// 48x48 PNG of a yin-yang symbol
const base64 = 'data:image/png;base64,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';

run().catch(err => console.log(err));
async function run() {
   const blob = await fetch(base64).then(res => res.blob());

   const formData = new FormData();
   formData.append('yinyang.png', blob);

   // Post the form, just make sure to set the 'Content-Type' header
   const res = await axios.post('//localhost:5001/upload', formData, {
      headers: {
         'Content-Type': 'multipart/form-data'
      }
   });

   // Prints "yinyang.png"
   console.log(res.data);
}

The form-data npm module also supports Node.js streams.

const FormData = require('form-data');
const axios = require('axios');
const fs = require('fs');

const formData = new FormData();
formData.append('yinyang.png', fs.createReadStream('./yinyang.png'));
const res = await axios.post('http://localhost:3000/upload', formData, {
   // You need to use `getHeaders()` in Node.js because Axios doesn't
   // automatically set the multipart form boundary in Node.
   headers: formData.getHeaders()
});

Suggestion : 5

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 datacallbackFn() : Callback functions to handle the promise. axios.post(url, data).then(callbackFn()).catch(callbackFn(err))url : The request url for HTTP POST.data : An object containing the POST datacallbackFn() : Callback functions to handle the promise. axios({method : ‘post’,url : url,data : dataheaders : headers}).then(callbackFn()).catch(callbackFn())method : specifies the HTTP methoddata : an object containing the POST data.headers(optional) : An object to specify the headers associated with the request.

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="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"             crossorigin="anonymous">
   </script>
     <title>Document</title>
</head>
  

<body>
     <h3 style="color:green; font-size:25px;">
          Pretagcode For Pretagcode
        </h3>
     <form>
          <input name="first-name" /><br>
          <input name="last-name" /><br>
          <input name="address" /><br>
          <button type="submit">Submit</button>
        </form>
</body>

</html>

Javascript Code to send form data to servers :

window.addEventListener('load', () => {

   const form = document.querySelector('form');
   form.addEventListener('submit', (e) => {
      //to prevent reload
      e.preventDefault();
      //creates a multipart/form-data object
      let data = new FormData(form);
      axios({
            method: 'post',
            url: '/',
            data: data,
         })
         .then((res) => {
            console.log(res);
         })
         .catch((err) => {
            throw err
         });
   });
});

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"
}

Suggestion : 6

Install axios in your React project. If you haven’t installed axios yet, you can run the below command to install axios. In this session, we’ll try our hand at solving the Send Multipart Form Data Axios With Node Js puzzle by using the computer language. The code that follows serves to illustrate this point. Submitting a form using axios. You only need axios dependency installed to use axios. Step 1: Below is the command to create React app in your project… npx create-react-app new_files.

1._

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }

  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }

  onChange(e) {
    this.setState({file:e.target.files[0]})
  }

  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}



export default SimpleReactFileUpload

To solve the same problem as Send Multipart Form Data Axios With Node Js, you can also utilise the method that is discussed further down this page, along with several code samples.

const axios = require('axios');
const FormData = require('form-data');

const form = new FormData();
// Second argument  can take Buffer or Stream (lazily read during the request) too.
// Third argument is filename if you want to simulate a file upload. Otherwise omit.
form.append('field', 'a,b,c', 'blah.csv');
axios.post('http://example.org/endpoint', form, {
   headers: form.getHeaders(),
}).then(result => {
   // Handle result…
   console.log(result.data);
});

Suggestion : 7

Create the form with its inputs and submit input/button as you would normally do. Essentially, you need to cancel the form submission default behavior with preventDefault() function and then describe the process you want React to do with your form. If you keep the form data in state, then you can send the state data into the service that accepts it using an AJAX call.13-Nov-2020 Add a submit event listener to the form and pass the event object with it.

In this lesson, we’ll use programming to attempt to solve the Add Formdata To Axios Request In Js puzzle. This is demonstrated by the code below.

var bodyFormData = new FormData();

bodyFormData.append('userName', 'Fred');
bodyFormData.append('image', imageFile);

axios({
      method: "post",
      url: "myurl",
      data: bodyFormData,
      headers: {
         "Content-Type": "multipart/form-data"
      },
   })
   .then(function(response) {
      //handle success
      console.log(response);
   })
   .catch(function(response) {
      //handle error
      console.log(response);
   });

Suggestion : 8

Before uploading a file with axios, you first need to create a form and append the file to it. Axios can be used both in the frontend as backend and the library doesn't differentiate between the two. Therefore, sending a file with axios in Node.js is similar to sending a file with axios in the browser. You can also append a file as a stream to the form. This is useful when, for example, the file is fetched from an external resource. You can then proxy the file directly to another API without storing it locally. We've looked at different ways to append a file to a form, either as a Buffer or a Stream. Below is a complete example that reads a file from disk into a Buffer and uploads it to an external API with axios.

Because we don't have access to the FormData interface in Node.js as we do in the browser, we use the form-data library to construct a form. This is similar to a <form> element with encoding type set to "multipart/form-data" in the browser.

To construct a form, create a new FormData instance and use the append(name, value) method to add a file and additional fields.

// `form-data` library gives us a similar API in Node.js to the `FormData` interface in the browser
const FormData = require('form-data');

// Create a new form instance
const form = new FormData();

// Append text fields to the form
form.append('productName', 'Node.js Stickers');
form.append('productDescription', 'Cool collection of Node.js stickers for your laptop.');

// `file` can either be a Buffer or a Stream
// ⚠️ don't forget the 3rd argument, the file name, when appending a file
form.append('productImage', file, 'stickers.jpg');

If you're familiar with multer, it uses MemoryStorage by default which is essentially storing the files in memory as a Buffer. Reading a file from disk with fs.readFile() also gives you the file stored as a Buffer.

In both cases, you can append the file buffer to the FormData form:

const form = new FormData();

// File parsed by multer from incoming request
const file = req.file;
form.append('file', file.buffer, file.originalname);

// or read from disk
const file = await fs.readFile('./my-image.jpg');
form.append('file', file, 'my-image.jpg');

3._

// Fetch external image as a stream
const response = await axios.get('https://i.imgur.com/8uJcFxW.jpg', {
   responseType: 'stream'
});

const form = new FormData();
// Pass image stream from response directly to form
form.append('image', response.data, 'kitten.jpg');

To send a form with axios in Node.js, you have to grab the form boundary and add it to the request.

The getHeaders() method on the form returns an object with Content-Type header set to multipart/form-data plus a unique boundary:

// form.getHeaders() gives you the Content-Type header with a unique boundary
console.log(form.getHeaders());
// {
//   'content-type': 'multipart/form-data; boundary=--------------------------339261229255605205279691'
// }

Use the destructuring assignment to set the Content-Type header in the config parameter (3rd argument). This allows you to add additional headers if you wish to do so.

Here's how to send a form with axios:

// When using axios in Node.js, you need to set the Content-Type header with the form boundary
// by using the form's `getHeaders()` method
const response = await axios.post(url, form, {
   headers: {
      ...form.getHeaders(),
      Authorization: 'Bearer ...', // optional
   },
});

Suggestion : 9

In node.js, you can use the form-data library as follows: Alternatively, you can encode data using the qs library: Note that URLSearchParams is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment). The qs library is preferable if you need to stringify nested objects, as the querystring method has known issues with that use case (https://github.com/nodejs/node-v0.x-archive/issues/1665).

In a browser, you can use the URLSearchParams API as follows:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

2._

const qs = require('qs');
axios.post('/foo', qs.stringify({
   'bar': 123
}));

Or in another way (ES6),

import qs from 'qs';
const data = {
   'bar': 123
};
const options = {
   method: 'POST',
   headers: {
      'content-type': 'application/x-www-form-urlencoded'
   },
   data: qs.stringify(data),
   url,
};
axios(options);

or 'URLSearchParams' from 'url module' as follows:

const url = require('url');
const params = new url.URLSearchParams({
   foo: 'bar'
});
axios.post('http://something.com/', params.toString());

6._

const FormData = require('form-data');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form, {
   headers: form.getHeaders()
})