Multipart Form Data | Effect Http Client

HttpClientRequest.bodyFormData() sends a FormData object as the request body. The Content-Type is automatically set to multipart/form-data with an appropriate boundary string.

This is the standard way to send form data in modern JavaScript, and it’s what you need when the server expects multipart encoding, especially when files are involved.

1
import {
2
  FetchHttpClient,
3
  HttpClient,
4
  HttpClientRequest,
5
} from "effect/unstable/http";
6
import { Effect } from "effect";
7

8
function submitForm() {
9
  return Effect.gen(function* () {
10
    const client = yield* HttpClient.HttpClient;
11

12
    // Build a FormData object, just like you would in a browser
13
    const formData = new FormData();
14
    formData.append("title", "Effect HTTP Guide");
15
    formData.append("author", "Effect Team");
16
    formData.append("tags", "typescript");
17
    formData.append("tags", "effect");
18

19
    const request = HttpClientRequest.post("https://httpbin.org/post").pipe(
20
      HttpClientRequest.bodyFormData(formData),
21
    );
22

23
    const response = yield* client.execute(request);
24
    const data = yield* response.json;
25

26
    return data;
27
  }).pipe(Effect.provide(FetchHttpClient.layer));
28
}
29

30
// Test it
31
Effect.runPromise(submitForm()).then((data) => {
32
  console.log("Form data received:", data.form);
33
});

Output:

1
Form data received: {
2
  author: 'Effect Team',
3
  tags: [ 'typescript', 'effect' ],
4
  title: 'Effect HTTP Guide'
5
}

Notice that formData.append was called twice with the same key "tags". Unlike an object (where duplicate keys would overwrite), FormData preserves all values, and the server receives them as an array. This is the same behavior as having multiple <input> elements with the same name attribute in an HTML form.

You construct the FormData using the standard Web API — new FormData(), .append(), .set(), etc. — and pass it directly to bodyFormData. The client handles the multipart encoding and boundary generation.

Stay in the loop