Easier way to work with FormData

[carpben]

Is your feature request related to a problem? Please describe.

Yes.
When fetching and sending data as form data, the user is required to manually build a form data object.

• If the data is nested, building form data isn't trivial, and can result in an inappropriate structure and bugs.
• If the data already exists as an object or array, the user needs to write his own solution to convert an object to form data.

Describe the solution you'd like

Provide a reliable easy way to convert object to form data.

Describe alternatives you've considered

I couldn't find a simple existing solution to easily convert a nested object to form data.

Additional context

Since form data is only used (as far as I know) in the context of fetching, I thought Axios should provide this functionality. Perhaps export a function that can convert an object to form data, or add a property to AxiosConfig and handle the conversion internally.

If relevant I'd be happy to submit a PR.

[alexbidenko]

Yes, a agree with the issue and have same problem - in some my projects I have need to serializу body of all requests. For FormData serializing all request bodies.

I prepare a Pull Request for Axios repository for adding new feature in Axios library.

Also it will could use for GraphQL body serializing mayby.

[carpben]

Thanks @alexbidenko1998,
Your PR suggests to add to the config object the option to pass a function to convert an object to formdata. This is not what I had in mind. My idea was to provide the functionality of converting an object to formdata, instead of the user having to deal with it.

[alexbidenko]

@carpben , I understand your idea and I need same function for Axios, but I assumed that for universaly library like Axios more powerfull would be method for body converting, like paramsSerializer. It could using for different pupose. You also can use it for your problem.

And I had solution in my project and proposed it for Axios library)

P.S. This issue I use for Pull request becouse I think that you write about same problem like me.

[ghost]

Hello everyone.
@carpben Thanks for your great suggestion.
I agree that this feature would be really useful. Sometimes it is really annoying transforming the native JS objects to form-data or add an additional dependency for this purpose.

I am ready to contribute. But probably the contract and requirements should be determined first:

• the name of the parameter that should be added to the config
• in which part of the config the parameter should be added to
• can some third-party library be used for transformation or this function should be written from scratch
• etc.

Also, it would be good to get a confirmation from the maintainers that they are ready to include this new feature in axios.

[carpben]

#3757 adds a function to convert a data object (plain old JS object) to FormData.
Currently it doesn't deal with the API and how to offer this functionality to the user.
I wonder if we can let go of the requirement that the data property in the config object must be submitted as FormData. Then if it isn't FormData to convert it to such using the toFormData function.

[chinesedfan]

See https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format. axios expects users to handle this kind of work by special packages. (cc @jasonsaayman)

[carpben]

@chinesedfan , I'm not suggesting to change the current API or functionality in any way. Since usage of FormData is done only in the context of a requests/calls, it makes sense to export such a function from the library itself. This might looks as such:

import axios, {toFormData} from "axios"

axios({
  method: "post",
  url: "www.example.com/endpoint",
  data: toFormData(jsObject), 
  headers: { "Content-Type": "multipart/form-data" },
})

If a project makes use of Axios for it's AJAX calls, it will only build FormData where axios is used, so this could be very convenient for users.

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[carpben]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

Feature suggestion still relevant.

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[jasonsaayman]

Still relevant, adding additional statuses

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[carpben]

@jasonsaayman what can we do to advance this feature suggestion?

[chinesedfan]

@carpben It's true that will be a little more convenient for users if axios does inside, but increase more burden for axios maintainers. That's a tradeoff and I admit that I am conservative. In fact, users can do this simple things very well. If you don't like to create form data everywhere, axios interceptors can help you.

Compared with other request client, i.e. sindresorhus/ky, users also need create FormData or URLSearchParams by themselves. So I will persist in the original opinion and open to listen new discussions from you and @jasonsaayman.

[carpben]

@chinesedfan , I'm not saying that creating form data is complex, it isn't.
However:

• It is needed by almost every Axios user
• For almost all post/put requests
• It is repetitive and time consuming
• Bugs can occur when there is nesting and optional values.

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[Ou7law007]

Nesting formdata is a nightmare. I'm still unable to do it.

It took me a while to even realize what the problem was.

[Anhaachan]

So we need to let axios know that parsing data is literally instance of FormData,l right?