fix: upload multiple files (#7330)

* fix: upload multiple files

* chore: add missing tests

.changeset/gorgeous-pears-chew.md

@@ -0,0 +1,5 @@
+---
+"@vue-storefront/sdk": patch
+---
+
+- **[FIXED]** Fixed multiple files upload, now it works as expected.

docs/content/4.sdk/5.reference/sdk-change-log.md

@@ -12,7 +12,7 @@
 ```typescript
 // Upload a file using multipart/form-data
 await sdk.commerce.uploadFile(
-  { file: new File(["content"], "test.txt", { type: "text/plain" }) },
+  { file: new File(["content"], "test.pdf", { type: "application/pdf" }) },
   prepareConfig({
     headers: {
       "Content-Type": "multipart/form-data",
@@ -21,6 +21,10 @@ await sdk.commerce.uploadFile(
 );
 ```
 
+:::warning
+Files mustn't be included in the `FormData` object manually, SDK handles it automatically.
+:::
+
 ## 3.3.0
 
 ### Minor Changes

packages/sdk/src/__tests__/__mocks__/apiClient/types.ts

@@ -24,7 +24,7 @@ export type Endpoints = {
   /**
    * Upload a file.
    */
-  uploadFile: (params: {
-    file: { name: string; content: string };
-  }) => Promise<{ file: { name: string; content: string } }>;
+  uploadFile: (
+    params: any
+  ) => Promise<{ file: { name: string; content: string } }>;
 };

packages/sdk/src/__tests__/integration/modules/middlewareModule.spec.ts

@@ -919,4 +919,43 @@ describe("middlewareModule", () => {
       expect.any(Object)
     );
   });
+
+  it("should handle multiple files in FormData", async () => {
+    const customHttpClient = jest.fn();
+    const sdkConfig = {
+      commerce: buildModule(middlewareModule<Endpoints>, {
+        apiUrl: "http://localhost:8181/commerce",
+        httpClient: customHttpClient,
+      }),
+    };
+    const sdk = initSDK(sdkConfig);
+
+    const file1 = { name: "test1.txt", content: "test" };
+    const file2 = { name: "test2.txt", content: "test" };
+
+    await sdk.commerce.uploadFile(
+      {
+        files: [file1, file2],
+        metadata: {
+          description: "Multiple files upload",
+        },
+      },
+      prepareConfig({
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+    );
+
+    // Verify the call was made with correct URL and config
+    const [url, params, config] = customHttpClient.mock.calls[0];
+    expect(url).toBe("http://localhost:8181/commerce/uploadFile");
+    expect(params[0]).toEqual({
+      files: [file1, file2],
+      metadata: {
+        description: "Multiple files upload",
+      },
+    });
+    expect(config.headers["Content-Type"]).toBe("multipart/form-data");
+  });
 });

packages/sdk/src/modules/middlewareModule/utils/getRequestSender.ts

@@ -107,6 +107,18 @@ export const getRequestSender = (options: Options): RequestSender => {
     return logger;
   };
 
+  const appendToFormData = (formData: FormData, key: string, value: any) => {
+    if (value instanceof Blob || value instanceof File) {
+      formData.append(key, value);
+    } else if (typeof value === "object" && value !== null) {
+      Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+        appendToFormData(formData, nestedKey, nestedValue);
+      });
+    } else {
+      formData.append(key, JSON.stringify(value));
+    }
+  };
+
   const defaultHTTPClient: HTTPClient = async (url, params, config) => {
     const isMultipart = config?.headers?.["Content-Type"]?.includes(
       "multipart/form-data"
@@ -118,11 +130,7 @@ export const getRequestSender = (options: Options): RequestSender => {
     } else if (isMultipart) {
       const formData = new FormData();
       Object.entries(params).forEach(([key, value]) => {
-        if (value instanceof Blob || value instanceof File) {
-          formData.append(key, value);
-        } else {
-          formData.append(key, JSON.stringify(value));
-        }
+        appendToFormData(formData, key, value);
       });
       body = formData;