Ensure form posting works with files

Author: ejsmith

src/FetchClient.test.ts

@@ -1090,6 +1090,110 @@ Deno.test("can use per-domain rate limiting with auto-update from headers", asyn
   assertEquals(slowApiOptions.maxRequests, 5); // Updated from headers
 });
 
+Deno.test("can post FormData multipart", async () => {
+  const controller = new AbortController();
+  const port = 48081;
+
+  const server = Deno.serve(
+    { port, signal: controller.signal },
+    async (req) => {
+      if (req.method === "POST" && new URL(req.url).pathname === "/upload") {
+        try {
+          const contentType = req.headers.get("content-type") ?? "";
+          const isMultipart = contentType.startsWith("multipart/form-data;");
+          const form = await req.formData();
+          const responseJson: Record<string, unknown> = { isMultipart };
+          for (const key of form.keys()) {
+            const value = form.get(key);
+            if (value instanceof File) {
+              const arrayBuf = await value.arrayBuffer();
+              const bytes = new Uint8Array(arrayBuf);
+              const base64 = btoa(String.fromCharCode(...bytes));
+              responseJson[key] = {
+                name: value.name,
+                size: value.size,
+                type: value.type,
+                base64,
+              };
+            } else {
+              responseJson[key] = value;
+            }
+          }
+
+          return new Response(JSON.stringify(responseJson), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        } catch (err) {
+          return new Response(JSON.stringify({ error: String(err) }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" },
+          });
+        }
+      }
+      return new Response(null, { status: 404 });
+    },
+  );
+
+  const client = new FetchClient();
+  const fd = new FormData();
+  fd.append("field1", "value1");
+  fd.append("count", "42");
+  // Binary content (PNG header bytes) to ensure we don't corrupt binary uploads
+  const binaryBytes = new Uint8Array([0x89, 0x50, 0x4E, 0x47]);
+  fd.append(
+    "file",
+    new File(["Hello Multipart"], "greeting.txt", { type: "text/plain" }),
+  );
+  fd.append(
+    "binary",
+    new File([binaryBytes], "image.png", { type: "application/octet-stream" }),
+  );
+
+  const res = await client.postJSON<Record<string, unknown>>(
+    `http://localhost:${port}/upload`,
+    fd,
+    {
+      expectedStatusCodes: [200],
+    },
+  );
+
+  controller.abort();
+  await server.finished;
+
+  assertEquals(res.status, 200);
+  assert(res.ok);
+  assert(res.data);
+  assertEquals(res.data.field1, "value1");
+  assertEquals(res.data.count, "42");
+  assert(res.data.isMultipart);
+  const fileInfo = res.data.file as {
+    name: string;
+    size: number;
+    type: string;
+    base64: string;
+  };
+  assertEquals(fileInfo.name, "greeting.txt");
+  assertEquals(fileInfo.type, "text/plain");
+  // "Hello Multipart" length check
+  assertEquals(fileInfo.size, "Hello Multipart".length);
+  const binaryInfo = res.data.binary as {
+    name: string;
+    size: number;
+    type: string;
+    base64: string;
+  };
+  assertEquals(binaryInfo.name, "image.png");
+  assertEquals(binaryInfo.type, "application/octet-stream");
+  assertEquals(binaryInfo.size, 4);
+  // 0x89 50 4E 47 -> base64 iVBORw== (first 4 bytes of PNG yield iVBORw0KGgo but with only 4 bytes shorter)
+  // Let's compute expected base64 for [0x89,0x50,0x4E,0x47]
+  const expectedBinaryBase64 = btoa(
+    String.fromCharCode(0x89, 0x50, 0x4E, 0x47),
+  );
+  assertEquals(binaryInfo.base64, expectedBinaryBase64);
+});
+
 function delay(time: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, time));
 }

src/FetchClient.ts

@@ -381,7 +381,10 @@ export class FetchClient {
       }
     }
 
-    if (init?.body && typeof init.body === "object") {
+    if (
+      init?.body && typeof init.body === "object" &&
+      !(init.body instanceof FormData)
+    ) {
       init.body = JSON.stringify(init.body);
     }
 
@@ -619,12 +622,13 @@ export class FetchClient {
     body: object | string | FormData | undefined,
     options: RequestOptions | undefined,
   ): RequestInitWithObjectBody {
-    const isDefinitelyJsonBody = body !== undefined &&
-      body !== null &&
-      typeof body === "object";
+    const isFormData = typeof FormData !== "undefined" &&
+      body instanceof FormData;
+    const isJsonLikeObject = body !== undefined && body !== null &&
+      typeof body === "object" && !isFormData;
 
     const headers: Record<string, string> = {};
-    if (isDefinitelyJsonBody) {
+    if (isJsonLikeObject) {
       headers["Content-Type"] = "application/json";
     }