@brielov/formdata
is a TypeScript library designed to make working with
FormData
objects easy and reliable. It provides utilities to encode JavaScript
objects into FormData
for use in HTTP requests and decode FormData
back into
nested objects. This library handles nested objects, arrays, blobs, and various
edge cases gracefully.
- Encode objects to
FormData
: Convert deeply nested objects, arrays, numbers, booleans, and strings intoFormData
. - Decode
FormData
to objects: Reconstruct the original object from aFormData
instance with support for custom strategies for handling empty strings. - TypeScript support: Leverages TypeScript's type system for safety and auto-completion.
- Handles complex structures: Supports nested objects and arrays in both encoding and decoding.
Install the library via npm or yarn:
deno add jsr:@brielov/formdata
npx jsr add @brielov/formdata
yarn dlx jsr add @brielov/formdata
pnpm dlx jsr add @brielov/formdata
bunx jsr add @brielov/formdata
Use the encode
function to transform a JavaScript object into a FormData
instance:
import { encode } from "@brielov/formdata";
const data = {
name: "John Doe",
age: 30,
hobbies: ["reading", "cycling"],
address: {
street: "123 Main St",
city: "Metropolis",
},
};
const formData = encode(data);
console.log([...formData.entries()]);
Output:
[
["name", "John Doe"],
["age", "30"],
["hobbies[0]", "reading"],
["hobbies[1]", "cycling"],
["address[street]", "123 Main St"],
["address[city]", "Metropolis"]
]
Use the decode
function to reconstruct an object from a FormData
instance:
import { decode } from "@brielov/formdata";
const formData = new FormData();
formData.append("name", "John Doe");
formData.append("age", "30");
formData.append("hobbies[0]", "reading");
formData.append("hobbies[1]", "cycling");
formData.append("address[street]", "123 Main St");
formData.append("address[city]", "Metropolis");
const object = decode(formData);
console.log(object);
Output:
{
"name": "John Doe",
"age": "30",
"hobbies": ["reading", "cycling"],
"address": {
"street": "123 Main St",
"city": "Metropolis"
}
}
The decode
function allows you to define how empty strings are treated using
the emptyString
option:
"preserve"
(default): Keeps empty strings as they are."set null"
: Converts empty strings tonull
."set undefined"
: Ignores keys with empty string values.
import { decode } from "@brielov/formdata";
const formData = new FormData();
formData.append("empty", "");
formData.append("name", "John Doe");
// Decode with different strategies
console.log(decode(formData, { emptyString: "preserve" })); // { empty: "", name: "John Doe" }
console.log(decode(formData, { emptyString: "set null" })); // { empty: null, name: "John Doe" }
console.log(decode(formData, { emptyString: "set undefined" })); // { name: "John Doe" }
Encodes an object into a FormData
instance.
- Parameters:
data
: The object to encode. All keys and values will be serialized.
- Returns: A
FormData
instance containing the serialized data. - Throws: An error if
data
is not a plain object.
decode(formData: FormData, options?: { emptyString?: "set null" | "set undefined" | "preserve" }): DecodeObject
Decodes a FormData
instance into a nested object.
- Parameters:
formData
: TheFormData
instance to decode.options
(optional): Configuration for handling empty strings.emptyString
: Determines how empty string values are treated ("preserve"
,"set null"
,"set undefined"
).
- Returns: A nested object representing the decoded data.
Represents a single value decoded from FormData
.
type DecodeValue = string | Blob | null | DecodeObject | DecodeArray;
Represents a nested object structure.
interface DecodeObject {
[key: string]: DecodeValue;
}
Represents an array of DecodeValue
.
type DecodeArray = DecodeValue[];
MIT