Add multipart form support to playground

[mosch]

Summary

• enable toggling body type between text and multipart form
• implement multipart form editor with dynamic fields
• create FormData payload when sending request
• add an Upload API example to cosmo cargo for testing

Testing

• pnpm --filter zudoku test (fails: fetch failed)
• pnpm lint:ci (fails: fetch failed)

---

https://chatgpt.com/codex/tasks/task_b_683ff73838f48331b9bc05c87f125cc8

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zudoku-cosmo-cargo	❌ Failed (Inspect)			Jun 7, 2025 6:26pm
zudoku-docs	❌ Failed (Inspect)			Jun 7, 2025 6:26pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
zudoku-www	⬜️ Skipped (Inspect)			Jun 7, 2025 6:26pm

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d077c43.

Command	Status	Duration	Result
nx run zudoku:publish:local	❌ Failed	22s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-07 18:26:59 UTC

[Copilot]

Pull Request Overview

Adds multipart form support to the Playground, letting users switch between raw text and multipart/form-data bodies, and includes an Upload API example for testing.

• Introduce bodyType and formData fields in PlaygroundForm and wire up UI controls for selecting and editing multipart fields.
• Build a FormData payload in the request logic when bodyType is "multipart/form-data".
• Add a new Upload API example to the cosmo-cargo configuration and include its OpenAPI schema.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/zudoku/src/lib/plugins/openapi/playground/Playground.tsx	Added bodyType/formData to form, toggling logic, and FormData build
packages/zudoku/src/lib/plugins/openapi/playground/MultipartForm.tsx	New component for adding/removing multipart form fields
packages/zudoku/src/lib/plugins/openapi/playground/BodyPanel.tsx	Updated to render either a textarea or the multipart form editor based on bodyType
examples/cosmo-cargo/zudoku.config.tsx	Added Upload API navigation entry and schema reference
examples/cosmo-cargo/schema/upload.json	New OpenAPI schema for the file upload endpoint

Comments suppressed due to low confidence (2)

packages/zudoku/src/lib/plugins/openapi/playground/BodyPanel.tsx:42

• [nitpick] The display label "multipart/form" is truncated and may confuse users; consider using the full "multipart/form-data" string for clarity.

<SelectItem value="multipart/form-data">multipart/form</SelectItem>

packages/zudoku/src/lib/plugins/openapi/playground/Playground.tsx:211

• The new multipart/form-data payload construction logic isn't covered by existing tests; consider adding unit tests to verify FormData is built correctly for various field types.

let requestBody: BodyInit | undefined;

[Copilot]

[nitpick] This multipart/form-data payload assembly block is fairly large; extracting it into a dedicated helper function would improve readability and make it easier to test independently.

Suggested change

	const fd = new FormData();
	data.formData.forEach((part) => {
	if (!part.key) return;
	if (part.type === "file") {
	if (part.value instanceof File) {
	const blob = part.contentType
	? part.value.slice(0, part.value.size, part.contentType)
	: part.value;
	fd.append(part.key, blob, part.value.name);
	}
	} else {
	const val = part.value ?? "";
	if (part.contentType) {
	fd.append(part.key, new Blob([val], { type: part.contentType }));
	} else {
	fd.append(part.key, val as string);
	}
	}
	});
	requestBody = fd;
	requestBody = assembleMultipartFormData(data.formData);