fix(transformation): improve safeBtoa for UTF-8 handling and add tests for Hindi characters

Author: manu4543

src/url.ts

@@ -291,7 +291,7 @@ export const buildTransformationString = function (transformation: Transformatio
       } else if (key === "raw") {
         parsedTransformStep.push(transformation[i][key] as string);
       } else {
-        if (transformKey === "di") {
+        if (transformKey === "di" || transformKey === "ff") {
           value = removeTrailingSlash(removeLeadingSlash(value as string || ""));
           value = value.replace(/\//g, "@@");
         }

src/utils/transformation.ts

@@ -28,55 +28,14 @@ export default {
 }
 
 export const safeBtoa = function (str: string): string {
+    // Prefer Buffer when available (Node.js / SSR): handles UTF-8 natively.
     if (typeof (globalThis as any).Buffer !== "undefined") {
         return (globalThis as any).Buffer.from(str, "utf8").toString("base64");
     }
 
-    const bytes =
-        typeof TextEncoder !== "undefined"
-            ? new TextEncoder().encode(str)
-            : encodeUTF8Fallback(str);
-
-    if (typeof btoa !== "undefined") {
-        let binary = "";
-        const chunkSize = 0x8000;
-        for (let i = 0; i < bytes.length; i += chunkSize) {
-            binary += String.fromCharCode.apply(
-                null,
-                Array.prototype.slice.call(bytes, i, i + chunkSize) as any,
-            );
-        }
-        return btoa(binary);
-    }
-
-    throw new Error("Cannot generate base64 string; Expected `Buffer` or `btoa` to be defined");
-};
-
-function encodeUTF8Fallback(str: string): Uint8Array {
-    const out: number[] = [];
-    for (let i = 0; i < str.length; i++) {
-        let c = str.charCodeAt(i);
-        if (c < 0x80) {
-            out.push(c);
-        } else if (c < 0x800) {
-            out.push(0xc0 | (c >> 6), 0x80 | (c & 0x3f));
-        } else if (c >= 0xd800 && c <= 0xdbff && i + 1 < str.length) {
-            const c2 = str.charCodeAt(i + 1);
-            if (c2 >= 0xdc00 && c2 <= 0xdfff) {
-                const cp = 0x10000 + (((c & 0x3ff) << 10) | (c2 & 0x3ff));
-                out.push(
-                    0xf0 | (cp >> 18),
-                    0x80 | ((cp >> 12) & 0x3f),
-                    0x80 | ((cp >> 6) & 0x3f),
-                    0x80 | (cp & 0x3f),
-                );
-                i++;
-                continue;
-            }
-            out.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
-        } else {
-            out.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
-        }
-    }
-    return new Uint8Array(out);
-}
+    // Browser: btoa() throws on characters with code points > 0xFF, so convert
+    // the string to UTF-8 bytes first, then base64-encode them (per MDN).
+    const bytes = new TextEncoder().encode(str);
+    const binary = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");
+    return btoa(binary);
+};

test-app/tests/basic.spec.ts

@@ -44,6 +44,15 @@ test.describe("URL generation", () => {
         expect(url).toBe(`https://ik.imagekit.io/test_url_endpoint/test_path.jpg`);
     });
 
+    test('should encode a src path containing Hindi (non-ASCII) characters', async ({ page }) => {
+        const url = await buildSrc(page, {
+            urlEndpoint: "https://ik.imagekit.io/demo",
+            src: "/sdk-testing-files/हिन्दी.png"
+        });
+
+        expect(url).toBe(`https://ik.imagekit.io/demo/sdk-testing-files/%E0%A4%B9%E0%A4%BF%E0%A4%A8%E0%A5%8D%E0%A4%A6%E0%A5%80.png`);
+    });
+
     test('should generate a valid URL when a src is provided without transformation', async ({ page }) => {
         const url = await buildSrc(page, {
             urlEndpoint: "https://ik.imagekit.io/test_url_endpoint",

test-app/tests/overlay.spec.ts

@@ -431,4 +431,29 @@ test.describe("Overlay encoding test cases", () => {
       );
     });
   });
+
+  test("should encode Hindi (non-ASCII) text overlay and base path", async ({ page }) => {
+    const url = await buildSrc(page, {
+      urlEndpoint: "https://ik.imagekit.io/demo/",
+      src: "sdk-testing-files/हिन्दी.png",
+      transformation: [
+        {
+          overlay: {
+            type: "text",
+            text: "हिन्दी",
+            transformation: [
+              {
+                fontColor: "red",
+                fontSize: "32",
+                fontFamily: "sdk-testing-files/Poppins-Regular_Q15GrYWmL.ttf",
+              },
+            ],
+          },
+        },
+      ],
+    });
+    expect(url).toBe(
+      "https://ik.imagekit.io/demo/sdk-testing-files/%E0%A4%B9%E0%A4%BF%E0%A4%A8%E0%A5%8D%E0%A4%A6%E0%A5%80.png?tr=l-text,ie-4KS54KS%2F4KSo4KWN4KSm4KWA,co-red,fs-32,ff-sdk-testing-files@@Poppins-Regular_Q15GrYWmL.ttf,l-end",
+    );
+  });
 });