https://github.com/k1eu/typed-formdata
Utility library for working with FormData in Typescript
https://github.com/k1eu/typed-formdata
formdata formdata-format typescript typescript-library
Last synced: 28 days ago
JSON representation
Utility library for working with FormData in Typescript
- Host: GitHub
- URL: https://github.com/k1eu/typed-formdata
- Owner: k1eu
- License: mit
- Created: 2024-08-10T13:07:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-13T20:15:13.000Z (over 1 year ago)
- Last Synced: 2025-06-07T05:13:43.703Z (10 months ago)
- Topics: formdata, formdata-format, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# typed-formdata
`typed-formdata` is a utility library for working with FormData in Typescript.
In a nutshell, Typed FormData allows you to:
- Work with FormData with strongly typed fields
- Helpful for both Frontend and Backend work with FormData
- Integrate it with Full stack typescript frameworks like Remix, Next.js, Nest.js
- It is a drop-in replacement for FormData
- It is built on top of the native FormData interface
- _Parse the formData body according to schema (WIP)_
## Installation
```sh
npm install @k1eu/typed-formdata
```
```sh
yarn add @k1eu/typed-formdata
```
```sh
pnpm add @k1eu/typed-formdata
```
```sh
bun add @k1eu/typed-formdata
```
## Overview
Package can help you both on Frontend and Backend side of the application.
It provides a `TypedFormData` class and parser functions for Request and FormData. Of course it is advised to have a validation layer in your backend until we have a schema validator implemented in the library.
Request handler:
```ts
import { TypedFormData } from "@k1eu/typed-formdata";
type IncomingData = {
resourceId: string;
file: File;
};
export const handler = async (req: Request) => {
const formData = parseFormDataRequest(req);
const resourceId: string = formData.get("resourceId");
const file: File = formData.get("file");
const age: string = formData.get("age"); // Type Error! Age doesn't exist in IncomingData
saveFile(file, resourceId);
return new Response(
`Hello your file ${file.name} is saved for the resource ${resourceId}`
);
};
```
Frontend form:
```ts
import { TypedFormData } from "@k1eu/typed-formdata";
type MyFormData = {
login: string;
password: string;
};
function MyPage() {
return (
{
e.preventDefault();
const formData = new TypedFormData(e.currentTarget);
const login: string = formData.get("login");
const password: string = formData.get("password");
loginAndSubmit(login, password);
}}
>
Submit
);
}
```
Remix action:
```tsx
import { TypedFormData } from "@k1eu/typed-formdata";
type FormFields = {
login: string;
password: string;
};
export async function action({ request }: ActionArgs) {
const formData = parseFormDataRequest(request);
const login: string = formData.get("login");
const password: string = formData.get("password");
const file = formData.get("file"); // Type Error!
loginAndSubmit(login, password);
return redirect("/success");
}
export default function MyPage() {
return (
Submit
);
}
```
Other Parser functions:
```ts
// parseFormData
import { parseFormData } from "@k1eu/typed-formdata";
type FormFields = {
resourceId: string;
file: File;
};
const formData = new FormData(document.querySelector("form"));
const typedFormData = await parseFormData(formData);
// same as
// const typedFormData = new TypedFormData(document.querySelector("form") as HTMLFormElement);
```
## License
See [LICENSE](https://github.com/k1eu/typed-formdata/blob/main/LICENSE)