question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't post FormData since Axios 0.25.0

See original GitHub issue

Describe the issue

I can’t post FormData since "axios": "^0.25.0",

Error: Request failed with status code 400

Example Code

export const client = axios.create({
        baseURL: URL_API,
        withCredentials: true,
        responseType: 'json',
	timeout: 30000,
});

const params = new FormData();

params.append('name', data.model);
params.append('idFuel', data.idFuel);
params.append('power', data.idPower);

client.post(`/app/society/${idSociety}/vehicle`, params, { headers: { "Content-Type": "multipart/form-data" } })

Expected behavior, if applicable

That it works

Environment

  • Axios Version: 0.25.0
  • Node.js Version: v14.17.6
  • OS: iOS 15, Android 11 (But on all platforms and versions)
  • Additional Library Versions: React Native 0.64.3

Additional context/Screenshots

No problem with "axios": "^0.24.0",

I saw this PR https://github.com/axios/axios/pull/3757 on 0.25.0, but I don’t know what I have to change in code.

Thanks for your help 👍

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:34
  • Comments:46 (4 by maintainers)

github_iconTop GitHub Comments

40reactions
kenikoricommented, Feb 23, 2022

It works for me:

const formData = new FormData();
...
const response = await networking.post('/URL', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  transformRequest: (data, headers) => {
    return formData;
  },
});

Versions: react-native: 0.67.2 axios: 0.26.0

22reactions
schteffcommented, Mar 11, 2022

This is a shorter form, since it is still needed in 0.26.1

axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  transformRequest: formData => formData,
})

The headers value might only be needed if you have modified the default Content-Type for axios. (just a guess since I have read that axios should set the correct Content-Type based on the FormData type)

In which axios version will the fix that closed this issue be released?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why does 'formData' not work in 'axios 0.26.1' in react native ...
This bug has been posted on Axios GitHub issues and apparently it is present since 0.25.0. I had to roll back to version...
Read more >
axios - npm
Promise based HTTP client for the browser and node.js. Latest version: 1.2.1, last published: 23 days ago. Start using axios in your project ......
Read more >
axios/CHANGELOG.md - UNPKG
There is a bug in react native Android platform when using get method. It will trigger a 'Network Error' when passing the requestData...
Read more >
POST form data using Axios API in JavaScript (including a file)
Source code: https://openjavascript.info/2022/08/03/ post - form-data -using- axios /⚡ Looking for high-performance, affordable web hosting for ...
Read more >
cannot read properties of undefined (reading 'data') axios
I need to post some form data to a mockapi endpoint, using Axios and Vuex. I'm using Vue Cli v2, and Vuex 3....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found