Support other FormData implementations

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

It’s related to the problem of sending multipart/form-data with Axios on Node.js

Describe the solution you’d like

I would like to be able to do

const axios = require('axios');
const { FormData } = require('formdata-node');
const form = new FormData();
axios.post('http://localhost:8888', form)

Describe alternatives you’ve considered

N/A

Additional context

got recommends using formdata-node. Axios recommends form-data.

I would like to use formdata-node with both because I want to use both got and Axios and I don’t want people reading the code to need to notice that there’s two different libraries used for FormData. Also formdata-node has a table saying that form-data’s FormData doesn’t have a bunch of methods that the browser’s does. I tried using formdata-node with Axios

cd /tmp
mkdir axios-form-test
cd axios-form-test
npm init -y
npm install axios
npm install formdata-node
node

const axios = require('axios');
const { FormData } = require('formdata-node');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_other_field', 'my second value');

axios.post('http://localhost:8888', form)

and got an error

Uncaught:
Error: Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream
    at createError (/private/tmp/axios-test/node_modules/axios/lib/core/createError.js:16:15)
    at dispatchHttpRequest (/private/tmp/axios-test/node_modules/axios/lib/adapters/http.js:98:23)
    at new Promise (<anonymous>)
    at httpAdapter (/private/tmp/axios-test/node_modules/axios/lib/adapters/http.js:48:10)
    at dispatchRequest (/private/tmp/axios-test/node_modules/axios/lib/core/dispatchRequest.js:58:10)
    at Axios.request (/private/tmp/axios-test/node_modules/axios/lib/core/Axios.js:108:15)
    at Axios.<computed> [as post] (/private/tmp/axios-test/node_modules/axios/lib/core/Axios.js:140:17)
    at Function.wrap [as post] (/private/tmp/axios-test/node_modules/axios/lib/helpers/bind.js:9:15) {
  config: { [...]

[verhovsky]

Node 18 was just released and it comes with a native FormData and that also should be supported. This is what I get with axios 0.27.2

$ node
Welcome to Node.js v18.0.0.
Type ".help" for more information.
> const axios = require('axios');
undefined
> await axios.post('localhost:8888', new FormData())
(node:24059) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Uncaught:
[AxiosError: Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream] {
  code: 'ERR_BAD_REQUEST',
  config: {

[DigitalBrainJS]

I was going to add support for it (both form-data and formdata-node) when I did a PR with the FormData enhancement for Axios about six months ago, but then I decided to keep only form-data for a while, since the package was pretty new. Most likely in the near future we should replace the default form-data module with formdata-node, or create our own simple stream encoder, but writing it in ES5 is painful.

Currently, you can use a custom transform to support this package (both form-data & formdata-node simultaneously)

import axios from "axios";
import { Readable } from "stream";
import { FormDataEncoder } from "form-data-encoder";
import { FormData } from "formdata-node";
import FormDataLegacy from "form-data";

((transforms) => {
  const isFormData = (thing) =>
    thing &&
    Object.prototype.toString.call(thing) === "[object FormData]" &&
    thing.values;

  transforms.unshift((data, headers) => {
    if (isFormData(data)) {
      const encoder = new FormDataEncoder(data);
      Object.assign(headers, encoder.headers);
      return Readable.from(encoder);
    }

    return data;
  });
})(axios.defaults.transformRequest);

// use axios with it
(async()=>{
  function test(form) {
    form.append("test", 123);
    return axios.post("https://httpbin.org/post", form).then(({data})=> console.log(data), console.warn);
  }

 console.log(axios.VERSION);
 // formdata-node
 await test(new FormData());
 // formdata
 await test(new FormDataLegacy());
})();