axios post request to send form data

Question

axios POST request is hitting the url on the controller but setting null values to my POJO class  when I go through developer tools in chrome  the payload contains data  What am I doing wrong   Axios POST Request   var body         userName   Fred       userEmail   Flintstone gmail com     axios       method   post       url    addUser       data  body     then function  response        console log response       catch function  error        console log error         Browser Response     If I set headers as   headers     Content-Type  multipart form-data      The request throws the error     Error in posting multipart form-data  Content-Type header is missing boundary   If I make the same request in postman it s working fine and sets values to my POJO class   Can anyone explain how to set boundary or how can I send form data using axios

User · Answer

The above method worked for me but since it was something I needed often, I used a basic method for flat object. Note, I was also using Vue and not REACT

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

Which worked for me until I ran into more complex data structures with nested objects and files which then let to the following

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        packageData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

User · Answer

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                This solution is also useful if you re working with React Native

User · Answer

Upload  multiple  binary files Node js Things become complicated when you want to post files via multipart form-data  especially multiple binary files  Below is a working example  const FormData   require  form-data   const fs   require  fs   const path   require  path    const formData   new FormData   formData append  files     JSON stringify   to     phoneNumber  process env RINGCENTRAL RECEIVER         test json   formData append  files     fs createReadStream path join   dirname   test png      test png   await rc post   restapi v1 0 account   extension   fax   formData      headers  formData getHeaders        Instead of headers    Content-Type    multipart form-data    I prefer headers  formData getHeaders   I use async and await above  you can change them to plain Promise statements if you don t like them In order to add your own headers  you just headers       yourHeaders     formData getHeaders       Newly added content below  Browser Browser s FormData is different from the NPM package  form-data   The following code works for me in browser  HTML   lt input type  quot file quot  id  quot image quot  accept  quot image png quot   gt   JavaScript  const formData   new FormData       add a non-binary file formData append  files     new Blob     quot hello quot    quot world quot        type   application json       request json       add a binary file const element   document getElementById  image   const file   element files 0  formData append  files     file  file name  await rc post   restapi v1 0 account   extension   fax   formData

User · Answer

2020 ES6 way of doing  Having the form in html I binded in data like so   DATA   form       name   Joan Cap de porc      email   fake email com      phone  2323     query   cap d ou     file  null     legal  false      onSubmit   async submitForm       const formData   new FormData     Object keys this form  forEach  key    gt        formData append key  this form key           try       await this  axios post   ajax contact contact-us   formData      this  emit  formSent       catch  err        this errors push  form error

User · Answer

Using application x-www-form-urlencoded format in axios     By default  axios serializes JavaScript objects to JSON  To send data   in the application x-www-form-urlencoded format instead  you can use   one of the following options    Browser  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     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    Alternatively  you can encode data using the qs library      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

User · Answer

https   www npmjs com package axios Its Working     quot content-type quot    quot application x-www-form-urlencoded quot      commit this import axios from  axios    let requestData           username    quot abc gmail cm quot         password   quot 123456                const url    quot Your Url Paste Here quot        let options           method   quot POST quot         headers              Content-type    application json  charset UTF-8            Authorization   Bearer      quot your token Paste Here quot                  data  JSON stringify requestData         url            axios options         then response   gt            console log  quot K      res  -  quot   response           console log  quot K      res status -  quot   response status                   catch error   gt            console log  quot K      error  -  quot   error              fetch request fetch url        method   POST       body  JSON stringify requestPayload                  headers             Content-type    application json  charset UTF-8           Authorization   Bearer     token                    then  response    gt  response json          commit out this part if response body is empty      then  json    gt            console log  quot response  -  quot   json          catch  error   gt           console log  quot Api call error  quot   error message           alert error message

User · Answer

import axios from  axios   import qs from  qs       const url    https   yourapplicationbaseurl api user authenticate       let data           Email   testuser gmail com         Password   Admin 123             let options           method   POST         headers     content-type    application x-www-form-urlencoded           data  qs stringify data         url            axios options         then res   gt            console log  yeh we have   res data                   catch er   gt            console log  no data sorry    er

User · Answer

You can post axios data by using FormData   like  var bodyFormData   new FormData     And then add the fields to the form you want to send  bodyFormData append  userName    Fred     If you are uploading images  you may want to use  append bodyFormData append  image   imageFile     And then you can use axios post method  You can amend it accordingly  axios     method   quot post quot     url   quot myurl quot     data  bodyFormData    headers     quot Content-Type quot    quot multipart form-data quot           then function  response          handle success     console log response           catch function  response          handle error     console log response          Related GitHub issue  Can t get a  post with  Content-Type    multipart form-data  to work   axios axios

User · Answer

Check out querystring   You can use it as follows   var querystring   require  querystring    axios post  http   something com    querystring stringify   foo   bar

User · Answer

Even More straightforward   axios post   addUser        userName   Fred       userEmail   Flintstone gmail com      then function  response        console log response       catch function  error        console log error

User · Answer

In my case  the problem was that the format of the FormData append operation needed the additional  quot options quot  parameter filling in to define the filename thus  var formData   new FormData    formData append fieldName  fileBuffer   filename  originalName     I m seeing a lot of complaints that axios is broken  but in fact the root cause is not using form-data properly  My versions are   quot axios quot    quot  0 21 1 quot    quot form-data quot    quot  3 0 0 quot    On the receiving end I am processing this with multer  and the original problem was that the file array was not being filled - I was always getting back a request with no files parsed from the stream  In addition  it was necessary to pass the form-data header set in the axios request          const response   await axios post getBackendURL       api Documents     userId     createDocument   formData            headers  formData getHeaders            My entire function looks like this  async function uploadDocumentTransaction userId  fileBuffer  fieldName  originalName        var formData   new FormData        formData append fieldName  fileBuffer   filename  originalName         try           const response   await axios post              getBackendURL       api Documents     userId     createDocument               formData                                headers  formData getHeaders                                     return response        catch  err               error handling          The value of the  quot fieldName quot  is not significant  unless you have some receiving end processing that needs it

User · Answer

i needed to calculate the content length aswell const formHeaders   form getHeaders    formHeaders  quot Content-Length quot     form getLengthSync    const config    headers  formHeaders   return axios post url  form  config   then res   gt        console log  form uploaded

[reactjs] axios post request to send form data

Examples related to reactjs

Examples related to react-redux

Examples related to axios

Examples related to ajaxform

Examples related to axios-cookiejar-support