Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added axios.formToJSON method; #4735

Merged
merged 4 commits into from May 25, 2022

Conversation

DigitalBrainJS
Copy link
Collaborator

@DigitalBrainJS DigitalBrainJS commented May 21, 2022

  • Added formDataToJSON internal helper;
  • Added axios.formToJSON method that converts form to a deep JSON object;
  • Added client tests;
  • Added the ability to handle HTMLFormElement as a request payload;
  • Added the ability for form/formData objects to be sent as a JSON if the content-type header is explicitly set to application/json;

So now HTML form can be automatically submitted as a JSON object, and there is no need to aggregate the form field values into the object;

<form id="form" action="" method="post" onsubmit="test(event)">
  <input type="text" name="foo" value="1">
  <input type="text" name="deep.prop" value="2">
  <input type="text" name="deep prop spaced" value="3">
  <input type="text" name="baz" value="4">
  <input type="text" name="baz" value="5">

  <select name="user.age">
    <option value="value1">Value 1</option>
    <option value="value2" selected>Value 2</option>
    <option value="value3">Value 3</option>
  </select>

  <input type="submit" value="Save">
</form>
await axios.post('https://httpbin.org/post', document.querySelector('#form'), {
    headers: {'Content-Type': 'application/json'}
});

Form[Data] will be serialized to the following object:

{
  "foo": "1",
  "deep": {
    "prop": {
      "spaced": "3"
    }
  },
  "baz": [
    "4",
    "5"
  ],
  "user": {
    "age": "value2"
  }
}

DigitalBrainJS and others added 4 commits May 16, 2022 15:05
…ders

� Conflicts:
�	.eslintrc.js
�	lib/adapters/http.js
�	lib/adapters/xhr.js
Added `axios.formToJSON` method;
Added client tests;
@jasonsaayman jasonsaayman merged commit c008e57 into axios:master May 25, 2022
jasonsaayman added a commit that referenced this pull request May 28, 2022
* Fixing proxy beforeRedirect regression (#4708)

* Adding Canceler parameters config and request (#4711)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `toFormData` regression bug (unreleased) with Array-like objects serialization; (#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Allow webpack users to overwrite buildins (#4715)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `AxiosError` status code type; (#4717)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `AxiosError` stack capturing; (#4718)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* allow type definition for axios instance methods (#4224)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* add `string[]` to `AxiosRequestHeaders` type (#4322)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixing AxiosRequestHeaders typings (#4334)

Co-authored-by: Shakirov Kirill <ksshakirov@sberautotech.ru>
Co-authored-by: Jay <jasonsaayman@gmail.com>

* Added the ability for the `url-encoded-form` serializer to respect the `formSerializer` config; (#4721)

Added test for `formSerializer` config in context of `url-encoded-form` serializer;

* Updated eslint config; (#4722)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* fix: add isCancel type assert (#4293)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Added data URL support for node.js; (#4725)

* Added data URL support for node.js;
Added missed data URL protocol for the browser environment;
Optimized JSON parsing in the default response transformer;
Refactored project structure;
Added `cause` prop for AxiosError instance that refers to the original error if it was wrapped with `AxiosError.from` method;
Added fromDataURI helper;
Added test for handling data:url as an `arraybuffer|text|stream`;

* Added throwing of 405 HTTP error if the method is not GET;

* Fix/4263/maxbodylength defaults (#4731)

* test(http): add test case for default body length in follow-redirects

* fix(http): provide proper default body length to follow-redirects

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Adding types for progress event callbacks (#4675)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed bug #4727 : toFormData Blob issue on node>v17; (#4728)

* Fixed bug #4727;
Added node 18.x to the CI;
Added hotfix for `ERR_OSSL_EVP_UNSUPPORTED` issue with karma running on node >=17.x;
Added `cross-env` to allow running build and test scripts on Windows platforms;

* Added conditional setting of `--openssl-legacy-provider` option for node versions >=17.x;

* Refactored ssl-hotfix & test script;

* Fixed and refactored default max body length test due to ECONNRESET failure;

* Added test for converting the data uri to a Blob;
Fixed bug with parsing mime type for Blob;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* URL params serializer; (#4734)

* Refactored BuildURL helper to use URLSearchParams serializer;

* Updated typings;
Added TS test;

* Added `axios.formToJSON` method; (#4735)

* Draft

* Added `formDataToJSON` helper;
Added `axios.formToJSON` method;
Added client tests;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Bump grunt from 1.5.2 to 1.5.3 (#4743)

Bumps [grunt](https://github.com/gruntjs/grunt) from 1.5.2 to 1.5.3.
- [Release notes](https://github.com/gruntjs/grunt/releases)
- [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG)
- [Commits](gruntjs/grunt@v1.5.2...v1.5.3)

---
updated-dependencies:
- dependency-name: grunt
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Updated README.md; (#4742)

Updated index.d.ts;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* chore: removed Travis CI config file as we have moved to GitHub actions

* chore: updated actions to run on new version based branches

* Fix/4737/timeout error message for http (#4738)

* Fixing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

* Testing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixing content-type header repeated (#4745)

Co-authored-by: Jay <jasonsaayman@gmail.com>

Co-authored-by: Maxime Bargiel <maxime.bargiel@gmail.com>
Co-authored-by: 毛呆 <aweikalee@163.com>
Co-authored-by: Dmitriy Mozgovoy <robotshara@gmail.com>
Co-authored-by: Tom Ceuppens <t-c@live.be>
Co-authored-by: Jelle Schutter <jelle@schutter.xyz>
Co-authored-by: Rraji Abdelbari <57002508+estarossa0@users.noreply.github.com>
Co-authored-by: Kirill Shakirov <kirill-shakirov@mail.ru>
Co-authored-by: Shakirov Kirill <ksshakirov@sberautotech.ru>
Co-authored-by: chenjigeng <178854407@qq.com>
Co-authored-by: Dimitris Halatsis <dimitris_ha@hotmail.com>
Co-authored-by: Johann Cooper <johanngcooper@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Victor Augusto <vdbernardes@gmail.com>
Co-authored-by: João Gabriel Quaresma <j.quaresmasantos_98@hotmail.com>
jasonsaayman added a commit that referenced this pull request May 28, 2022
* Fixing proxy beforeRedirect regression (#4708)

* Adding Canceler parameters config and request (#4711)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `toFormData` regression bug (unreleased) with Array-like objects serialization; (#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Allow webpack users to overwrite buildins (#4715)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `AxiosError` status code type; (#4717)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed `AxiosError` stack capturing; (#4718)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* allow type definition for axios instance methods (#4224)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* add `string[]` to `AxiosRequestHeaders` type (#4322)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixing AxiosRequestHeaders typings (#4334)

Co-authored-by: Shakirov Kirill <ksshakirov@sberautotech.ru>
Co-authored-by: Jay <jasonsaayman@gmail.com>

* Added the ability for the `url-encoded-form` serializer to respect the `formSerializer` config; (#4721)

Added test for `formSerializer` config in context of `url-encoded-form` serializer;

* Updated eslint config; (#4722)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* fix: add isCancel type assert (#4293)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Added data URL support for node.js; (#4725)

* Added data URL support for node.js;
Added missed data URL protocol for the browser environment;
Optimized JSON parsing in the default response transformer;
Refactored project structure;
Added `cause` prop for AxiosError instance that refers to the original error if it was wrapped with `AxiosError.from` method;
Added fromDataURI helper;
Added test for handling data:url as an `arraybuffer|text|stream`;

* Added throwing of 405 HTTP error if the method is not GET;

* Fix/4263/maxbodylength defaults (#4731)

* test(http): add test case for default body length in follow-redirects

* fix(http): provide proper default body length to follow-redirects

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Adding types for progress event callbacks (#4675)

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixed bug #4727 : toFormData Blob issue on node>v17; (#4728)

* Fixed bug #4727;
Added node 18.x to the CI;
Added hotfix for `ERR_OSSL_EVP_UNSUPPORTED` issue with karma running on node >=17.x;
Added `cross-env` to allow running build and test scripts on Windows platforms;

* Added conditional setting of `--openssl-legacy-provider` option for node versions >=17.x;

* Refactored ssl-hotfix & test script;

* Fixed and refactored default max body length test due to ECONNRESET failure;

* Added test for converting the data uri to a Blob;
Fixed bug with parsing mime type for Blob;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* URL params serializer; (#4734)

* Refactored BuildURL helper to use URLSearchParams serializer;

* Updated typings;
Added TS test;

* Added `axios.formToJSON` method; (#4735)

* Draft

* Added `formDataToJSON` helper;
Added `axios.formToJSON` method;
Added client tests;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Bump grunt from 1.5.2 to 1.5.3 (#4743)

Bumps [grunt](https://github.com/gruntjs/grunt) from 1.5.2 to 1.5.3.
- [Release notes](https://github.com/gruntjs/grunt/releases)
- [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG)
- [Commits](gruntjs/grunt@v1.5.2...v1.5.3)

---
updated-dependencies:
- dependency-name: grunt
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Updated README.md; (#4742)

Updated index.d.ts;

Co-authored-by: Jay <jasonsaayman@gmail.com>

* chore: removed Travis CI config file as we have moved to GitHub actions

* chore: updated actions to run on new version based branches

* Fix/4737/timeout error message for http (#4738)

* Fixing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

* Testing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

Co-authored-by: Jay <jasonsaayman@gmail.com>

* Fixing content-type header repeated (#4745)

Co-authored-by: Jay <jasonsaayman@gmail.com>

Co-authored-by: Maxime Bargiel <maxime.bargiel@gmail.com>
Co-authored-by: 毛呆 <aweikalee@163.com>
Co-authored-by: Dmitriy Mozgovoy <robotshara@gmail.com>
Co-authored-by: Tom Ceuppens <t-c@live.be>
Co-authored-by: Jelle Schutter <jelle@schutter.xyz>
Co-authored-by: Rraji Abdelbari <57002508+estarossa0@users.noreply.github.com>
Co-authored-by: Kirill Shakirov <kirill-shakirov@mail.ru>
Co-authored-by: Shakirov Kirill <ksshakirov@sberautotech.ru>
Co-authored-by: chenjigeng <178854407@qq.com>
Co-authored-by: Dimitris Halatsis <dimitris_ha@hotmail.com>
Co-authored-by: Johann Cooper <johanngcooper@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Victor Augusto <vdbernardes@gmail.com>
Co-authored-by: João Gabriel Quaresma <j.quaresmasantos_98@hotmail.com>
@jimmywarting
Copy link

Have never like this kind of solution that makes the result sometimes be a object pair or an array.
it's a disaster waiting to happen. someone on a backend expects an array and always do body.baz.forEach(...) then someone could handcrafted payload that only include one baz then it would break b/c it's now an object instead. it's just bad practices.

i would rather do:

  • [...formData] to get a [key, value][] or:
  • Object.fromEntries(fd) to always get out a object.

@eudinnou
Copy link

this looks like a(another) breaking change 😞 We are upgrading axios from 0.x to the latest version and we had configured by default the content-type header to 'application/json' and now the post formData is transformed to json. The xhr adapter has a condition to delete the content-type header if the request data is formData, but it doesn't have a chance anymore because of this default transformRequest

and this logic is a bit twisted:

    if (isFormData) {
      if (!hasJSONContentType) {
        return data;
      }
      return hasJSONContentType ? JSON.stringify(formDataToJSON(data)) : data;
    }

@willpoorman
Copy link

this looks like a(another) breaking change 😞 We are upgrading axios from 0.x to the latest version and we had configured by default the content-type header to 'application/json' and now the post formData is transformed to json. The xhr adapter has a condition to delete the content-type header if the request data is formData, but it doesn't have a chance anymore because of this default transformRequest

and this logic is a bit twisted:

    if (isFormData) {
      if (!hasJSONContentType) {
        return data;
      }
      return hasJSONContentType ? JSON.stringify(formDataToJSON(data)) : data;
    }

I've noticed the same thing after upgrading in a similar situation. We had default Content-Type set to application/json but occasionally had usage where a multi-part form data was provided. It would replace the default Content Type with the multi-part form one when that data was provided. But now, with this change in place, it automatically converts the form data to json rather than automatically switches the content-type from json to multipart form

@DigitalBrainJS
Copy link
Collaborator Author

@willpoorman Well, the major version release assumes that there are breaking changes. It seems quite logical that if you set an explicit JSON content-type header, you are expecting JSON and not something else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants