Cannot upload file within FormData

[Romick2005]

Describe the bug

After upgrading from 0.24.0 to 0.25.0 File Form upload breaks.

To Reproduce

Original working on 0.24.0 code.

axios({
    method: "post",
    url: [serverUrl],
    data: formData, // FormData object instance with uploading file field
    timeout: 120000
});

This code was working previously, but now backend cannot extract file field.
After specifying content type:

axios({
    method: "post",
    url: [serverUrl],
    data: formData, // FormData object instance with uploading file field
    timeout: 120000,
    headers: {"Content-Type": "multipart/form-data"},
});

I got an error on backend "bad content-type header, no multipart boundary"

Expected behavior

Seems like previous version of axios (0.24.0) automatically add correct header and also boundary.
Or was there any breaking change that I didn't notice?

Environment

• Axios Version [0.25.0]
• Node.js Version [16.0.0]
• Additional Library Versions [formidable 2.0.1, React-Native 0.66.4]

Additional context/Screenshots

Not needed.

[Romick2005]

Seems like there is a problem in isFormData function:

I am using axios in react-native project where:

const form = new FormData();
toString.call(form) === '[object Object]'; // true for React-Native
toString.call(form) === '[object FormData]'; // true for Browser
(form instanceof FormData) // true for both platforms

[gerryfletch]

It could be useful to update the release notes of 0.25.0 with this breaking change (or bug). Took me a while to track it down

[alfianwahid]

I downgrade to 0.24.0 because of this.
same issue here #4406

[mlazari]

This issue appeared after this change: https://github.com/axios/axios/pull/3342/files#diff-5dfe38baf287dcf756a17c2dd63483781b53bf4b669e10efdd01e74bcd8e780aR57

As was said above, it is because Object.prototype.toString.call(data) returns [object Object] rather than [object FormData], at least in React Native (data being declared with const data = new FormData();). Seems to be related to an older issue in form-data: form-data/form-data#396

I managed to fix it without downgrading by adding this to the beginning of the index file in the app:

import FormData from 'form-data';

FormData.prototype[Symbol.toStringTag] = 'FormData';

[tapz]

Why are these kind of useless "optimizations" even done? Why change something that works? Nobody will see any speed improvement.

[RopoMen]

Clean code is always easier to read. True reason this to get master is either

• lack of tests
• low test coverage
• or tests are not run against all relevant platforms

[jasonsaayman]

Closed I will be releasing the fix tonight

[ObidosDev]

2 days have passed...

[SirAddam]

using 0.26 and still not working. 12 days have passed... mlazari tks for the workaround

[taschik]

#4406 (comment) <-- this comment worked for me on both 0.25 and 0.26

[tapz]

I can confirm that 0.26.0 does not fix the bug.

[christophemenager]

I still have this bug with 0.26

[Karemhz]

is 0.24 working?

[gerryfletch]

is 0.24 working?

It is for me.

[jasonsaayman]

Does anybody want to try to put in a pull request for this, it would be greatly appreciated.

[mskarimi]

is 0.24 working?

it is work for me

[gimnath1997]

Same issue with "axios": "^0.26.1"

[RopoMen]

@Romick2005

Your code

axios({
    method: "post",
    url: [serverUrl],
    data: formData, // FormData object instance with uploading file field
    timeout: 120000,
    headers: {"Content-Type": "multipart/form-data"},
});

Is not done as it is documented. From Axios Readme https://github.com/axios/axios
axios.post('https://example.com', form.getBuffer(), { headers: form.getHeaders() })

And here is the implementation of form-data getHeaders() function https://github.com/form-data/form-data/blob/53adbd81e9bde27007b28083068f2fc8272614dc/lib/form_data.js#L294-L307

It is also setting the boundary

var formHeaders = {
    'content-type': 'multipart/form-data; boundary=' + this.getBoundary()
  };

I suggest first fixing the form-data usage to use form.getHeaders() and if issue still persists then post details over here.

[Romick2005]

@RopoMen

I don't think you read manual carefully.
As mention in readme:
In node.js, you can use the [form-data](https://github.com/form-data/form-data) library as follows:
Unfortunately I am not using axios on node backend, but on mobile client I have only react-native.

Also why do I need form-data if only axios should be enough?
I do not like to put everything what is available on the web and use only one "thing" from those heap as you probably do.
PS I am using formidable on node backend server as stated in the issue description.

So I assume your suggestion is wrong.

[tapz]

This works perfectly well in Axios 0.24.0, so no excuse to not fix the bug. The solution definitely cannot be to include some additional dependency and add parameters to post call.

[elev8studio]

I'm having the same issue but only when using Android browser. iOS seems to work fine. I downgraded to 0.24.0 as suggested in comments above but I'm having the same issue. I just see a failed network request. I can't believe this is still not fixed. Can anyone help me? I'm using Vue.js

[Romick2005]

If it does not work for you using Axios 0.24.0, then probably you have different problem than this one.

[edritech93]

still issue use 0.26.1

[princefishthrower]

@edritech93 but I'm still seeing this issue on 0.26.1... unless you mean it is still an issue ON 0.26.1?

[abhijeet-shinde-invimatic]

FormData file upload is working in 0.27.2 and 0.22.0.

[jasonsaayman]

Please upgrade to 0.27.2

[mlazari]

Adding a note here on my previous comment #4412 (comment) that might be useful for someone.
Recently I found that there is FormData available globally in React Native, so there is no need to use the form-data dependency. Using the global one removed the need to use that FormData.prototype[Symbol.toStringTag] = 'FormData'; workaround, since the thing instanceof FormData uses the same FormData and returns true here in isFormData - https://github.com/axios/axios/blob/v0.27.2/lib/utils.js#L192