From 47012a0c4e3e8a80fcae620aaf08b16ceb343cde Mon Sep 17 00:00:00 2001
From: Liam Dyer <liamcdyer@gmail.com>
Date: Tue, 21 May 2024 16:11:35 -0400
Subject: [PATCH] ensure the client correctly handles all binary data (#8322)

* fix: walk blobs ignoring blobs in arrays directly

* add changeset

* fix function

* add changeset

* address review comments

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: pngwn <hello@pngwn.io>
---
 .changeset/sixty-horses-tell.md |  6 ++++++
 client/js/src/helpers/data.ts   | 26 ++++++--------------------
 client/js/src/test/data.test.ts | 21 +++++++++------------
 3 files changed, 21 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/sixty-horses-tell.md

diff --git a/.changeset/sixty-horses-tell.md b/.changeset/sixty-horses-tell.md
new file mode 100644
index 0000000000..84b99874fe
--- /dev/null
+++ b/.changeset/sixty-horses-tell.md
@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:ensure the client correctly handles all binary data
diff --git a/client/js/src/helpers/data.ts b/client/js/src/helpers/data.ts
index 13139ed860..3213a76853 100644
--- a/client/js/src/helpers/data.ts
+++ b/client/js/src/helpers/data.ts
@@ -41,13 +41,15 @@ export async function walk_and_store_blobs(
 		let blob_refs: BlobRef[] = [];
 
 		await Promise.all(
-			data.map(async (item) => {
+			data.map(async (_, index) => {
 				let new_path = path.slice();
-				new_path.push(item);
+				new_path.push(String(index));
 
 				const array_refs = await walk_and_store_blobs(
-					data[item],
-					root ? endpoint_info?.parameters[item]?.component || undefined : type,
+					data[index],
+					root
+						? endpoint_info?.parameters[index]?.component || undefined
+						: type,
 					new_path,
 					false,
 					endpoint_info
@@ -87,22 +89,6 @@ export async function walk_and_store_blobs(
 			);
 		}
 
-		if (
-			!blob_refs.length &&
-			!(
-				data instanceof Blob ||
-				data instanceof ArrayBuffer ||
-				data instanceof Uint8Array
-			)
-		) {
-			return [
-				{
-					path: path,
-					blob: new NodeBlob([JSON.stringify(data)]),
-					type: typeof data
-				}
-			];
-		}
 		return blob_refs;
 	}
 
diff --git a/client/js/src/test/data.test.ts b/client/js/src/test/data.test.ts
index e3f32fa6fd..456fb44b19 100644
--- a/client/js/src/test/data.test.ts
+++ b/client/js/src/test/data.test.ts
@@ -43,6 +43,15 @@ describe("walk_and_store_blobs", () => {
 		expect(parts[0].blob).toBe(false);
 	});
 
+	it("should handle arrays", async () => {
+		const image = new Blob([]);
+		const parts = await walk_and_store_blobs([image]);
+
+		expect(parts).toHaveLength(1);
+		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].path).toEqual(["0"]);
+	});
+
 	it("should handle deep structures", async () => {
 		const image = new Blob([]);
 		const parts = await walk_and_store_blobs({ a: { b: { data: { image } } } });
@@ -142,18 +151,6 @@ describe("walk_and_store_blobs", () => {
 		expect(parts[0].path).toEqual(["a", "b", "data", "image"]);
 		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
 	});
-
-	it("should convert an object with primitive values to BlobRefs", async () => {
-		const param = {
-			test: "test"
-		};
-		const parts = await walk_and_store_blobs(param);
-
-		expect(parts).toHaveLength(1);
-		expect(parts[0].path).toEqual([]);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
-		expect(parts[0].type).toEqual("object");
-	});
 });
 describe("update_object", () => {
 	it("should update the value of a nested property", () => {