How to Use FormData in Deno: Syntax and Example

In Deno, you can use the built-in FormData class to create and manipulate form data for HTTP requests or server handling. You create a new FormData instance, append key-value pairs, and then use it with fetch or request handlers. This works similarly to browser FormData but is available in Deno's runtime.

Syntax

The FormData class in Deno lets you build form data easily. You start by creating a new instance with new FormData(). Then, use append(name, value) to add fields. You can also use set(name, value) to overwrite existing fields. The get(name) method retrieves a value, and entries() lets you iterate all pairs.

typescript

const formData = new FormData();
formData.append("key", "value");
formData.set("key", "new value");
const value = formData.get("key");
for (const [name, val] of formData.entries()) {
  console.log(name, val);
}

Output

key new value

Example

This example shows how to create a FormData object, add fields, and send it with a POST request using Deno's fetch. It also demonstrates how to read form data from a request in a Deno server.

typescript

import { serve } from "https://deno.land/std@0.203.0/http/server.ts";

// Server to receive form data
serve(async (req) => {
  if (req.method === "POST") {
    const formData = await req.formData();
    const name = formData.get("name");
    const age = formData.get("age");
    return new Response(`Received name: ${name}, age: ${age}`);
  }
  return new Response("Send a POST request with form data.", { status: 200 });
});

// Client side: create and send FormData
const formData = new FormData();
formData.append("name", "Alice");
formData.append("age", "30");

fetch("http://localhost:8000", {
  method: "POST",
  body: formData,
}).then(async (res) => {
  console.log(await res.text());
});

Output

Received name: Alice, age: 30

Common Pitfalls

• Not awaiting req.formData(): This method returns a promise, so you must use await to get the data.
• Appending non-string values: FormData values should be strings or Blob objects; passing other types may cause errors.
• Forgetting to set method to POST: When sending form data, ensure the HTTP method is POST or PUT; GET requests do not support a body.
• Using append vs set: append adds multiple values for the same key, while set replaces existing values.

typescript

/* Wrong: forgetting await */
// const formData = req.formData(); // Missing await

/* Right: */
// const formData = await req.formData();

Quick Reference

Method	Description
new FormData()	Creates a new empty FormData object
append(name, value)	Adds a new key-value pair, allows duplicates
set(name, value)	Sets or replaces the value for a key
get(name)	Gets the first value associated with the key
entries()	Returns an iterator for all key-value pairs
delete(name)	Removes all values for the key

Key Takeaways

Use new FormData() to create form data in Deno.

Always await req.formData() when reading form data from requests.

Use append to add multiple values for the same key, set to overwrite.

FormData values must be strings or Blob objects for compatibility.

Send FormData with POST or PUT requests using fetch.