{"id":15537327,"url":"https://github.com/nullvoxpopuli/form-data-utils","last_synced_at":"2025-10-11T10:16:30.046Z","repository":{"id":241672344,"uuid":"807389191","full_name":"NullVoxPopuli/form-data-utils","owner":"NullVoxPopuli","description":"Utilities for working with the native FormData","archived":false,"fork":false,"pushed_at":"2025-10-05T22:09:55.000Z","size":794,"stargazers_count":29,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T00:13:07.213Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NullVoxPopuli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-05-29T02:30:18.000Z","updated_at":"2025-10-05T22:08:18.000Z","dependencies_parsed_at":"2024-05-29T16:13:09.693Z","dependency_job_id":"d1419d14-a15e-478e-8658-44050d32c527","html_url":"https://github.com/NullVoxPopuli/form-data-utils","commit_stats":{"total_commits":59,"total_committers":5,"mean_commits":11.8,"dds":0.4067796610169492,"last_synced_commit":"aaa4347e84f50d433cb97208cfc0ae992ce87bbc"},"previous_names":["nullvoxpopuli/form-data"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/NullVoxPopuli/form-data-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fform-data-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fform-data-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fform-data-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fform-data-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NullVoxPopuli","download_url":"https://codeload.github.com/NullVoxPopuli/form-data-utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fform-data-utils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006840,"owners_count":26084204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T11:56:10.504Z","updated_at":"2025-10-11T10:16:30.014Z","avatar_url":"https://github.com/NullVoxPopuli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# form-data-utils\n\n[Demo](https://ember-primitives.pages.dev/6-utils/data-from-event.md)\n\n\nA utility function for extracting the FormData as an object from the native `\u003cform\u003e` \nelement, allowing more ergonomic of usage of _The Platform_'s default form/fields usage.\n\nEach input within your `\u003cform\u003e` should have a `name` attribute.\n(or else the `\u003cform\u003e` element doesn't know what inputs are relevant)\n\nThis will provide values for all types of controls/fields,\n- input: text, checkbox (and checkbox arrays), radio, file, range, etc\n- select\n  - behavior is fixed from browser default behavior, where\n    only the most recently selected value comes through in\n    the FormData. This fix only affects `\u003cselect multiple\u003e`\n- submitter (the button/etc that causes the form to submit (if it has a name attribute))    \n\n## Installation\n\n```\nnpm add form-data-utils\n```\n\n## Usage\n\n```gjs\nimport { dataFrom } from 'form-data-utils';\n\nfunction handleSubmit(event) {\n  event.preventDefault();\n\n  let obj = dataFrom(event);\n  //  ^ { firstName: \"NVP\", isHuman: null, }\n}\n\n\u003ctemplate\u003e\n  \u003cform onsubmit={{handleSubmit}}\u003e\n    \u003clabel\u003e\n      First Name\n      \u003cinput type=\"text\" name=\"firstName\" value=\"NVP\" /\u003e\n    \u003c/label\u003e\n    \u003clabel\u003e \n      Are you a human?\n      \u003cinput type=\"checkbox\" name=\"isHuman\" value=\"nah\" /\u003e\n    \u003c/label\u003e\n\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n```\n\n## Non-primitive values\n\nIn some cases, you might want to select values that aren't primitive types, e.g selecting a user from a list of users.\nUnfortunately, FormData only supports strings. To work around this, `form-data-utils` provides some utility functions\nto \"attach\" a non-primitive value to an element:\n\n- `setValue(element: HTMLElement, value: unknown)` - binds a given value to a given element (value can be anything, e.g objects, arrays, etc)\n- `deleteValue(element: HTMLElement)` - undoes a previous `setValue` call\n\nAfter setting a value with `setValue`, that value will be considered by the `dataFrom` function.\n\n\u003e [!NOTE]  \n\u003e The ideal way to call these functions will probably vary with the framework you're using.\n\nFor example, in [Ember.js](https://emberjs.com/), you would use these functions in a modifier that you can then apply to elements.\n\n```gjs\nimport { dataFrom, deleteValue, setValue } from 'form-data-utils';\nimport { modifier } from 'ember-modifier';\n\n// define the ember specific modifier\nconst associateValue = modifier((element, [value]) =\u003e {\n  setValue(element, value);\n\n  return () =\u003e deleteValue(element);\n});\n\nfunction handleSubmit(event) {\n  event.preventDefault();\n\n  let obj = dataFrom(event);\n  //  ^ { admin: { id: 123, name: 'Sam...' }, user: { id: 321, name: 'Chris...' } }\n}\n\n\u003ctemplate\u003e\n  \u003cform onsubmit={{handleSubmit}}\u003e\n    {{#each users as |user|}}\n      \u003cdiv\u003e\n        \u003cinput type=\"radio\" name=\"admin\" value={{user.id}} {{associateValue user}} /\u003e\n        \u003clabel for={{user.id}}\u003e{{user.name}}\u003c/label\u003e\n      \u003c/div\u003e\n    {{/each}}\n\n    \u003cselect name=\"user\"\u003e\n      \u003coption value=\"\"\u003e\u003c/option\u003e\n\n      {{#each users as |user|}}\n        \u003coption value={{user.id}} {{associateValue user}}\u003e{{user.name}}\u003c/option\u003e\n      {{/each}}\n    \u003c/select\u003e\n\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n```\n\n`setValue` (and `deleteValue`) doesn't really care how you call it. It just needs an element and a value, that's it.\n\n\u003e [!NOTE]  \n\u003e `setValue` only supports `\u003cinput type=\"checkbox\"`, `\u003cinput type=\"radio\"` and `\u003cselect`.\n\n\u003e [!WARNING]  \n\u003e The value given by `setValue` has priority. This means that providing both a `value` attribute *and* a value via `setValue` will result in the `value` attribute being ignored by `dataFrom`. However, you might still use the `value` attribute it to create a more meaningful html structure.\n\n\n## Value types normalization\n\nAnother thing that `form-data-utils` does is to normalize the types of the values you get back from `dataFrom`. The following table lists the types you get back depending on the various controls available:\n\n| Control              | Type | Default (empty) value |\n| ------------------------- | ------------- | ------------- | \n| `\u003cinput type=\"text\"` (email, search, etc)  | `string`         | `''`            |\n| `\u003cinput type=\"number\"`  | `number`       | `null`             |\n| `\u003cinput type=\"range\"`    |  `number` |_ranges can't be empty_ |\n| `\u003cinput type=\"date\"`      | `Date`    | `null`             |\n| `\u003cinput type=\"datetime-local\"`      | `Date`    | `null`   |\n| `\u003cinput type=\"file\"`        | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)  | `null`             |\n| `\u003cinput type=\"file\" multiple` | [`File[]`](https://developer.mozilla.org/en-US/docs/Web/API/File)        | `[]`             |\n| `\u003cinput type=\"checkbox\"` without `value` |  `boolean`        | `false`             |\n| `\u003cinput type=\"checkbox\"` with `value` |  `GivenValueType`     | `null`             |\n| multiple `\u003cinput type=\"checkbox\"` with same `name` without `value` |  `boolean[]`        |  `[]`             |\n| multiple `\u003cinput type=\"checkbox\"` with same `name` with `value` |  `GivenValueType[]`        |  `[]`             |\n| `\u003cinput type=\"radio\"` without `value` | `boolean`        | `false`             |\n| `\u003cinput type=\"radio\"` with `value` |  `GivenValueType`      | `null`             |\n| `\u003cselect` |  `GivenValueType`        | `null`             |\n| `\u003cselect multiple` |  `GivenValueType[]`      | `[]`             |\n| `\u003cbutton type=\"submit\"` with `name` |  `GivenValueType`       | `null`             |\n\n\n\u003e [!NOTE]  \n\u003e `GivenValueType` here means the type of the value you passed in the `value` attribute **or** using the `setValue(element, value)` function.\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fform-data-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullvoxpopuli%2Fform-data-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fform-data-utils/lists"}