Uploading Files with Form Data | Effect Http Client

Most real-world file upload APIs expect the file as part of a multipart form data body, not as the raw request body. This is because the server often needs additional fields alongside the file: a title, a description, access permissions, and so on.

You can combine files and text fields using FormData:

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

8
function uploadAvatar(username: string) {
9
  return Effect.gen(function* () {
10
    const client = yield* HttpClient.HttpClient;
11

12
    // Create a file (in a browser, this would come from <input type="file">)
13
    const avatarFile = new File(["<fake image bytes>"], "avatar.png", {
14
      type: "image/png",
15
    });
16

17
    const formData = new FormData();
18
    formData.append("username", username);
19
    formData.append("avatar", avatarFile);
20

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

25
    const response = yield* client.execute(request);
26
    const data = yield* response.json;
27

28
    return data;
29
  }).pipe(Effect.provide(FetchHttpClient.layer));
30
}
31

32
// Test it
33
Effect.runPromise(uploadAvatar("emilys")).then((data) => {
34
  console.log("Form fields:", data.form);
35
  console.log("Files:", Object.keys(data.files));
36
});

Output:

1
Form fields: { username: 'emilys' }
2
Files: [ 'avatar' ]

The server receives both the text field (username) and the file (avatar) in a single request. The multipart encoding keeps them separate, each with their own content type and metadata.

Stay in the loop