added support for assigning FormData as body to individual batch requests

Author: ganigeorgiev

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.24.0
+
+- Added support for assigning `FormData` as body to individual batch requests ([pocketbase#6145](https://github.com/pocketbase/pocketbase/discussions/6145)).
+
+
 ## 0.23.0
 
 - Added optional `pb.realtime.onDisconnect` hook function.

dist/pocketbase.cjs.d.ts

@@ -1115,8 +1115,6 @@ declare class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     send(options?: SendOptions): Promise<Array<BatchRequestResult>>;
@@ -1132,19 +1130,19 @@ declare class SubBatchService {
      */
     upsert(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record create request into the current batch queue.
      */
     create(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record update request into the current batch queue.
      */
     update(id: string, bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record delete request into the current batch queue.
      */

dist/pocketbase.cjs.js

@@ -1158,8 +1158,6 @@ declare class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     send(options?: SendOptions): Promise<Array<BatchRequestResult>>;
@@ -1175,19 +1173,19 @@ declare class SubBatchService {
      */
     upsert(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record create request into the current batch queue.
      */
     create(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record update request into the current batch queue.
      */
     update(id: string, bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record delete request into the current batch queue.
      */

dist/pocketbase.cjs.js.map

@@ -1158,8 +1158,6 @@ declare class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     send(options?: SendOptions): Promise<Array<BatchRequestResult>>;
@@ -1175,19 +1173,19 @@ declare class SubBatchService {
      */
     upsert(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record create request into the current batch queue.
      */
     create(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record update request into the current batch queue.
      */
     update(id: string, bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record delete request into the current batch queue.
      */

dist/pocketbase.es.d.mts

@@ -1115,8 +1115,6 @@ declare class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     send(options?: SendOptions): Promise<Array<BatchRequestResult>>;
@@ -1132,19 +1130,19 @@ declare class SubBatchService {
      */
     upsert(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record create request into the current batch queue.
      */
     create(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record update request into the current batch queue.
      */
     update(id: string, bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record delete request into the current batch queue.
      */

dist/pocketbase.es.d.ts

@@ -1115,8 +1115,6 @@ declare class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     send(options?: SendOptions): Promise<Array<BatchRequestResult>>;
@@ -1132,19 +1130,19 @@ declare class SubBatchService {
      */
     upsert(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record create request into the current batch queue.
      */
     create(bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record update request into the current batch queue.
      */
     update(id: string, bodyParams?: {
         [key: string]: any;
-    }, options?: RecordOptions): void;
+    } | FormData, options?: RecordOptions): void;
     /**
      * Registers a record delete request into the current batch queue.
      */

dist/pocketbase.es.js

@@ -1,5 +1,5 @@
 {
-    "version": "0.23.0",
+    "version": "0.24.0",
     "name": "pocketbase",
     "description": "PocketBase JavaScript SDK",
     "author": "Gani Georgiev",

dist/pocketbase.es.js.map

@@ -1,5 +1,5 @@
 import { BaseService } from "@/services/BaseService";
-import { isFile } from "@/tools/formdata";
+import { isFile, isFormData, convertFormDataToObject } from "@/tools/formdata";
 import {
     SendOptions,
     RecordOptions,
@@ -41,8 +41,6 @@ export class BatchService extends BaseService {
     /**
      * Sends the batch requests.
      *
-     * Note: FormData as individual request body is not supported at the moment.
-     *
      * @throws {ClientResponseError}
      */
     async send(options?: SendOptions): Promise<Array<BatchRequestResult>> {
@@ -98,7 +96,7 @@ export class SubBatchService {
      *
      * The request will be executed as update if `bodyParams` have a valid existing record `id` value, otherwise - create.
      */
-    upsert(bodyParams?: { [key: string]: any }, options?: RecordOptions): void {
+    upsert(bodyParams?: { [key: string]: any } | FormData, options?: RecordOptions): void {
         options = Object.assign(
             {
                 body: bodyParams || {},
@@ -122,7 +120,7 @@ export class SubBatchService {
     /**
      * Registers a record create request into the current batch queue.
      */
-    create(bodyParams?: { [key: string]: any }, options?: RecordOptions): void {
+    create(bodyParams?: { [key: string]: any } | FormData, options?: RecordOptions): void {
         options = Object.assign(
             {
                 body: bodyParams || {},
@@ -148,7 +146,7 @@ export class SubBatchService {
      */
     update(
         id: string,
-        bodyParams?: { [key: string]: any },
+        bodyParams?: { [key: string]: any } | FormData,
         options?: RecordOptions,
     ): void {
         options = Object.assign(
@@ -210,8 +208,13 @@ export class SubBatchService {
 
         // extract json and files body data
         // -----------------------------------------------------------
-        for (const key in options.body) {
-            const val = options.body[key];
+        let body = options.body;
+        if (isFormData(body)) {
+            body = convertFormDataToObject(body)
+        }
+
+        for (const key in body) {
+            const val = body[key];
 
             if (isFile(val)) {
                 request.files[key] = request.files[key] || [];

dist/pocketbase.es.mjs

@@ -85,3 +85,70 @@ export function convertToFormDataIfNeeded(body: any): any {
 
     return form;
 }
+
+/**
+ * Converts the provided FormData instance into a plain object.
+ *
+ * For consistency with the server multipart/form-data inferring,
+ * the following normalization rules are applied for plain multipart string values:
+ *   - "true" is converted to the json "true"
+ *   - "false" is converted to the json "false"
+ *   - numeric strings are converted to json number ONLY if the resulted
+ *     minimal number string representation is the same as the provided raw string
+ *     (aka. scientific notations, "Infinity", "0.0", "0001", etc. are kept as string)
+ *   - any other string (empty string too) is left as it is
+ */
+export function convertFormDataToObject(formData: FormData): { [key: string]: any } {
+    let result: { [key: string]: any }= {};
+
+    formData.forEach((v, k) => {
+        if (k === "@jsonPayload" && typeof v == "string") {
+            try {
+                let parsed = JSON.parse(v)
+                Object.assign(result, parsed);
+            } catch (err) {
+                console.warn("@jsonPayload error:", err)
+            }
+        } else {
+            if (typeof result[k] !== 'undefined') {
+                if (!Array.isArray(result[k])) {
+                    result[k] = [result[k]]
+                }
+                result[k].push(inferFormDataValue(v));
+            } else {
+                result[k] = inferFormDataValue(v);
+            }
+        }
+    });
+
+    return result;
+}
+
+const inferNumberCharsRegex = /^[\-\.\d]+$/
+
+function inferFormDataValue(value: any): any {
+    if (typeof value != "string") {
+        return value
+    }
+
+    if (value == "true") {
+        return true;
+    }
+
+    if (value == "false") {
+        return false;
+    }
+
+    // note: expects the provided raw string to match exactly with the minimal string representation of the parsed number
+    if (
+        (value[0] === "-" || (value[0] >= '0' && value[0] <= '9')) &&
+        inferNumberCharsRegex.test(value)
+    ) {
+        let num = (+value)
+        if (("" + num) === value) {
+            return num
+        }
+    }
+
+    return value;
+}

dist/pocketbase.es.mjs.map

@@ -210,7 +210,91 @@ describe("BatchService", function () {
             });
 
             // restore
-            (globalThis.global as any).product = false;
+            (globalThis.global as any).HermesInternal = false;
+
+            assert.deepEqual(result as any, true);
+        });
+
+        test("Should convert FormData to object on individual batch request level", async function () {
+            const service = new BatchService(client);
+
+            fetchMock.on({
+                method: "POST",
+                url: service.client.buildURL("/api/batch") + "?q1=123",
+                additionalMatcher: (_, config) => {
+                    if (
+                        // custom header is missing
+                        config?.headers?.["x-test"] != "123" ||
+                        // multipart/form-data requests shouldn't have explicitly set Content-Type
+                        config?.headers?.["Content-Type"] ||
+                        // the body should have been converted to FormData
+                        !(config.body instanceof FormData)
+                    ) {
+                        return false;
+                    }
+
+                    assert.equal(Array.from(config.body.keys()).length, 5);
+
+                    assert.deepEqual(
+                        JSON.parse(config.body.get("@jsonPayload") as string),
+                        {
+                            requests: [
+                                {
+                                    method: "POST",
+                                    url: "/api/collections/%40test1/records?fields=1abc",
+                                    body: {
+                                        title: "test_title",
+                                        number1: 123,
+                                        number2: -123.456,
+                                        number3: '0.0',
+                                        number4: '10e100',
+                                        bool1: true,
+                                        bool2: false,
+                                        options: ["a","b","c"],
+                                        json_payload: 789,
+                                        description: "new",
+                                        json_array: [1,2,3],
+                                    },
+                                },
+                            ],
+                        },
+                    );
+
+                    assert.equal(config.body.getAll("requests.0.files_one").length, 1);
+                    assert.equal(config.body.getAll("requests.0.files_many").length, 3);
+
+                    return true;
+                },
+                replyCode: 200,
+                replyBody: true,
+            });
+
+            let formData = new FormData();
+            formData.append("title", "test_title")
+            formData.append("description", "old")
+            formData.append("number1", "123")
+            formData.append("number2", "-123.456")
+            formData.append("number3", "0.0")
+            formData.append("number4", "10e100")
+            formData.append("bool1", "true")
+            formData.append("bool2", "false")
+            formData.append("options", "a")
+            formData.append("options", "b")
+            formData.append("options", "c")
+            formData.append("files_one", new File(["test"], "test0.png"))
+            formData.append("files_many", new File(["test"], "test1.png"))
+            formData.append("files_many", new File(["test"], "test2.png"))
+            formData.append("files_many", new File(["test"], "test3.png"))
+            formData.append("@jsonPayload", `{"json_payload": 789, "description": "new", "json_array": [1,2,3]}`)
+
+            service.collection("@test1").create(formData, { fields: "1abc" });
+
+            const result = await service.send({
+                q1: 123,
+                headers: {
+                    "x-test": "123",
+                },
+            });
 
             assert.deepEqual(result as any, true);
         });