FormData avancés

Il est très simple de gérer des FormData à structure complexe et profonde en utilisant le bodyController adapté.

import { controlBodyAsFormData, ResponseContract, useRouteBuilder } from "@duplojs/http";
import { SDPE } from "@duplojs/server-utils";
import { A, asyncPipe, DPE, E, Path } from "@duplojs/utils";

useRouteBuilder("POST", "/documents", {
	bodyController: controlBodyAsFormData({ maxFileQuantity: 5 }),
})
	.extract({
		body: {
			userId: DPE.coerce.number(),
			files: DPE.object({
				alt: DPE.string(),
				file: SDPE.file().mimeType(["image/png", "image/jpeg"]),
				description: DPE.string(),
			}).array(),
		},
	})
	.handler(
		ResponseContract.noContent("files.receive"),
		async({ files, userId }, { response }) => {
			const { success, error } = await asyncPipe(
				files,
				A.map(
					async({ file, ...rest }, { index }) => asyncPipe(
						file.move(
							Path.resolveRelative([
								"super/path",
								`${userId}-${index}.${file.getExtension() ?? ""}`,
							]),
						),
						E.whenIsRight(
							(fileInterface) => E.success({
								path: fileInterface.path,
								...rest,
							}),
						),
					),
				),
				(promises) => Promise.all(promises),
				A.group(
					(element, { output }) => E.isRight(element)
						? output("success", element)
						: output("error", element),
				),
			);

			return response("files.receive");
		},
	);

Ici, la fonction controlBodyAsFormData définit la quantité maximale de fichiers autorisée dans la payload. L'extraction des données se fait comme pour du JSON, à la différence près que vous pouvez également utiliser le dataParser de fichier du serveur (SDPE.file()).

Envoyer du FormData côté client

Pour envoyer des FormData à structure complexe, il vous suffit d'utiliser le client.

import { createHttpClient } from "@duplojs/http/client";
import { type Routes } from "./types";
import { createFormData } from "@duplojs/utils";

const client = createHttpClient<Routes>({
	baseUrl: "http://localhost:1506",
});

await client.post(
	"/documents",
	{
		body: createFormData({
			userId: 10,
			files: [
				{
					alt: "super",
					file: new File([], "superFile.png"),
					description: "Super file.",
				},
				{
					alt: "super 2",
					file: new File([], "jonDo.jpg"),
					description: "Foo bar.",
				},
			],
		}),
	},
).iWantInformationOrThrow("files.receive");

Il suffit d'utiliser la fonction createFormData de la librairie @duplojs/utils pour obtenir un TheFormData (une classe étendue de FormData) qui supporte les structures complexes. Lorsque le client détecte que le body est un TheFormData, il ajoute automatiquement un en-tête personnalisé pour l'indiquer au serveur (content-type-options: advanced). Cela permet également de rester compatible avec des FormData classiques.