add FormData support

Author: omermecitoglu

README.md

@@ -46,6 +46,7 @@ The `createRoute` function is used to define route handlers in a type-safe and s
 | pathParams    | [ZodType](https://zod.dev)                                   | `(Optional)` Zod schema for validating path parameters.                                  |
 | queryParams   | [ZodType](https://zod.dev)                                   | `(Optional)` Zod schema for validating query parameters.                                 |
 | requestBody   | [ZodType](https://zod.dev)                                   | Zod schema for the request body (required for `POST`, `PUT`, `PATCH`).                   |
+| hasFormData   | `boolean`                                                    | Is the request body a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) |
 | action        | (source: [ActionSource](#action-source)) => Promise<[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)> | Function handling the request, receiving pathParams, queryParams, and requestBody. |
 | responses     | Record<`number`, [ResponseDefinition](#response-definition)> | Object defining possible responses, each with a description and optional content schema. |
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@omer-x/next-openapi-route-handler",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "a Next.js plugin to generate OpenAPI documentation from route handlers",
   "keywords": [
     "next.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@omer-x/eslint-config": "^1.0.7",
-    "@omer-x/openapi-types": "^0.1.0",
-    "@types/node": "^20.14.1",
+    "@omer-x/openapi-types": "^0.1.1",
+    "@types/node": "^20.14.2",
     "eslint": "^8.57.0",
     "ts-unused-exports": "^10.1.0",
     "tsup": "^8.1.0",

package.json

@@ -4,17 +4,29 @@ import { resolveContent } from "./content";
 import type { RequestBodyObject } from "@omer-x/openapi-types/request-body";
 import type { ZodType } from "zod";
 
-export function resolveRequestBody(source?: ZodType<unknown> | string) {
+export function resolveRequestBody(source?: ZodType<unknown> | string, isFormData: boolean = false) {
   if (!source) return undefined;
   return {
     // description: "", // how to fill this?
     required: true,
-    content: resolveContent(source),
+    content: resolveContent(source, false, isFormData),
   } as RequestBodyObject;
 }
 
-export async function parseRequestBody<B>(request: FixedRequest<B>, method: HttpMethod, schema?: ZodType<B> | string) {
+export async function parseRequestBody<B>(
+  request: FixedRequest<B>,
+  method: HttpMethod,
+  schema?: ZodType<B> | string,
+  isFormData: boolean = false
+) {
   if (!schema || typeof schema === "string") return null;
   if (method === "GET") throw new Error("GET routes can't have request body");
+  if (isFormData) {
+    const formData = await request.formData();
+    const body = Array.from(formData.keys()).reduce((collection, key) => ({
+      ...collection, [key]: formData.get(key),
+    }), {});
+    return schema.parse(body);
+  }
   return schema.parse(await request.json());
 }

src/core/body.ts

@@ -1,7 +1,7 @@
 import zodToJsonSchema from "zod-to-json-schema";
 import type { RequestBodyObject } from "@omer-x/openapi-types/request-body";
 import type { SchemaObject } from "@omer-x/openapi-types/schema";
-import type { ZodType } from "zod";
+import type { ZodObject, ZodType } from "zod";
 
 function resolveSchema(source: ZodType<unknown> | string, isArray: boolean = false): SchemaObject {
   if (typeof source === "string") {
@@ -11,13 +11,27 @@ function resolveSchema(source: ZodType<unknown> | string, isArray: boolean = fal
     }
     return refObject;
   }
-  return zodToJsonSchema(isArray ? source.array() : source, { target: "openApi3" }) as SchemaObject;
+  const schema = zodToJsonSchema(isArray ? source.array() : source, { target: "openApi3" }) as SchemaObject;
+  if (schema.type === "object" && source.constructor.name === "ZodObject") {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    for (const [propName, prop] of Object.entries((source as ZodObject<{}>).shape)) {
+      const result = (prop as ZodType).safeParse(new File([], "nothing.txt"));
+      if (result.success) {
+        schema.properties[propName] = {
+          type: "string",
+          format: "binary",
+          // contentEncoding: "base64", // swagger-ui-react doesn't support this
+        };
+      }
+    }
+  }
+  return schema;
 }
 
-export function resolveContent(source?: ZodType<unknown> | string, isArray: boolean = false) {
+export function resolveContent(source?: ZodType<unknown> | string, isArray: boolean = false, isFormData: boolean = false) {
   if (!source) return undefined;
   return {
-    "application/json": {
+    [isFormData ? "multipart/form-data" : "application/json"]: {
       schema: resolveSchema(source, isArray),
     },
   } as RequestBodyObject["content"];

src/core/content.ts

@@ -17,11 +17,13 @@ type ActionSource<PathParams, QueryParams, RequestBody> = {
 type RouteWithoutBody = {
   method: Extract<HttpMethod, "GET" | "DELETE" | "HEAD">,
   requestBody?: null,
+  hasFormData?: boolean,
 };
 
 type RouteWithBody<Body> = {
   method: Exclude<HttpMethod, "GET" | "DELETE" | "HEAD">,
   requestBody?: ZodType<Body> | string,
+  hasFormData?: boolean,
 };
 
 type RouteOptions<Method, PathParams, QueryParams, RequestBody> = {
@@ -42,7 +44,7 @@ export default function createRoute<M extends HttpMethod, PP, QP, RB>(input: Rou
       const { searchParams } = new URL(request.url);
       const pathParams = parsePathParams(props.params, input.pathParams) as PP;
       const queryParams = parseSearchParams(searchParams, input.queryParams) as QP;
-      const body = await parseRequestBody(request, input.method, input.requestBody ?? undefined) as RB;
+      const body = await parseRequestBody(request, input.method, input.requestBody ?? undefined, input.hasFormData) as RB;
       return await input.action({ pathParams, queryParams, body });
     } catch (error) {
       if (error instanceof Error && error.constructor.name === "ZodError") {
@@ -70,7 +72,7 @@ export default function createRoute<M extends HttpMethod, PP, QP, RB>(input: Rou
     description: input.description,
     tags: input.tags,
     parameters: parameters.length ? parameters : undefined,
-    requestBody: resolveRequestBody(input.requestBody ?? undefined),
+    requestBody: resolveRequestBody(input.requestBody ?? undefined, input.hasFormData),
     responses: responses,
   };
 

src/index.ts

@@ -1,4 +1,5 @@
 export interface FixedRequest<RequestBody> {
   url: string,
   json: () => Promise<RequestBody>,
+  formData: () => Promise<FormData>,
 }