feat(core): support for multipart/form-data file array (#572)

Co-authored-by: Youssef Gaber <1728215+Gabrola@users.noreply.github.com>

Author: victormachado-ada-tech

.changeset/pretty-spoons-dream.md

@@ -0,0 +1,5 @@
+---
+'@ts-rest/core': minor
+---
+
+Allow arrays of files to be uploaded

libs/ts-rest/core/src/lib/client.spec.ts

@@ -148,6 +148,15 @@ export const router = c.router(
       },
       contentType: 'multipart/form-data',
     },
+    uploadArray: {
+      method: 'POST',
+      path: '/upload-array',
+      body: c.type<{ files: File[] }>(),
+      responses: {
+        200: c.type<{ message: string }>(),
+      },
+      contentType: 'multipart/form-data',
+    },
   },
   {
     baseHeaders: z.object({
@@ -628,6 +637,38 @@ describe('client', () => {
         },
       });
     });
+
+    it('w/ File Array', async () => {
+      const value = { key: 'value' };
+      fetchMock.postOnce(
+        {
+          url: 'https://api.com/upload-array',
+        },
+        { body: value, status: 200 },
+      );
+
+      const files = [
+        new File([''], 'filename-1', { type: 'text/plain' }),
+        new File([''], 'filename-2', { type: 'text/plain' }),
+      ];
+
+      const result = await client.uploadArray({
+        body: { files },
+      });
+
+      expect(result.body).toStrictEqual(value);
+      expect(result.status).toBe(200);
+      expect(result.headers.get('Content-Length')).toBe('15');
+      expect(result.headers.get('Content-Type')).toBe('application/json');
+
+      expect(fetchMock).toHaveLastFetched(true, {
+        matcher: (_, options) => {
+          const formData = options.body as FormData;
+          const formDataFiles = formData.getAll('files');
+          return formDataFiles[0] === files[0] && formDataFiles[1] === files[1];
+        },
+      });
+    });
   });
 
   describe('application/x-www-form-urlencoded', () => {

libs/ts-rest/core/src/lib/client.ts

@@ -156,12 +156,22 @@ export const tsRestFetchApi: ApiFetcher = async ({
 const createFormData = (body: unknown) => {
   const formData = new FormData();
 
-  Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
+  const appendToFormData = (key: string, value: unknown) => {
     if (value instanceof File) {
       formData.append(key, value);
     } else {
       formData.append(key, JSON.stringify(value));
     }
+  };
+
+  Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        appendToFormData(key, item);
+      }
+    } else {
+      appendToFormData(key, value);
+    }
   });
 
   return formData;

libs/ts-rest/core/src/lib/infer-types.spec.ts

@@ -59,7 +59,7 @@ const contract = c.router(
       method: 'POST',
       path: '/images',
       contentType: 'multipart/form-data',
-      body: c.body<{ image: File }>(),
+      body: c.type<{ image: File; images: File[] }>(),
       responses: {
         201: c.otherResponse({
           contentType: 'text/plain',
@@ -568,6 +568,7 @@ it('type inference helpers', () => {
           body:
             | {
                 image: File;
+                images: File[];
               }
             | FormData;
           headers: { authorization: string; age?: number };

libs/ts-rest/core/src/lib/infer-types.ts

@@ -148,7 +148,7 @@ export type ClientInferResponseBody<
 
 type BodyWithoutFileIfMultiPart<T extends AppRouteMutation> =
   T['contentType'] extends 'multipart/form-data'
-    ? Without<ZodInferOrType<T['body']>, File>
+    ? Without<ZodInferOrType<T['body']>, File | File[]>
     : ZodInferOrType<T['body']>;
 
 export type ServerInferRequest<