@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
FormDatato objects: Reconstruct the original object from aFormDatainstance 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/formdataUse 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
FormDatainstance containing the serialized data. - Throws: An error if
datais 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: TheFormDatainstance 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