@gradio/uploadbutton 0.9.18 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @gradio/uploadbutton
 
+## 0.10.0
+
+### Features
+
+- [#13502](https://github.com/gradio-app/gradio/pull/13502) [`429faeb`](https://github.com/gradio-app/gradio/commit/429faeb643fb1afc1722c0f63fafa11603f2c87f) - Ensure every component dispatches a `change` event when its value changes.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+- @gradio/button@0.7.0
+
+## 0.9.19
+
+### Fixes
+
+- [#13336](https://github.com/gradio-app/gradio/pull/13336) [`14c8870`](https://github.com/gradio-app/gradio/commit/14c88701756c5fa57e8eaeac4df1385b9601da45) - Add UploadButton unit tests.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
+## 0.9.18
+
+### Dependency updates
+
+- @gradio/upload@0.17.9
+
+## 0.9.18
+
+### Dependency updates
+
+- @gradio/client@2.2.0
+
+## 0.9.18
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+- @gradio/upload@0.17.8
+
+## 0.9.18
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/button@0.6.6
+
 ## 0.9.18
 
 ### Dependency updates

package/Index.svelte

@@ -11,13 +11,7 @@
 	const props = $props();
 	const gradio = new Gradio<UploadButtonEvents, UploadButtonProps>(props);
 
-	let value = $state(gradio.props.value);
-
-	$effect(() => {
-		if (value !== gradio.props.value) {
-			gradio.props.value = value;
-		}
-	});
+	let value = $derived(gradio.props.value);
 
 	async function handle_event(
 		detail: null | FileData | FileData[],

package/UploadButton.test.ts

@@ -1,79 +1,436 @@
-import { test, describe, expect, vi, afterEach, assert } from "vitest";
-import { cleanup, render } from "@self/tootils";
+import { test, describe, afterEach, expect, vi } from "vitest";
+import {
+	cleanup,
+	render,
+	waitFor,
+	upload_file,
+	mock_client,
+	TEST_TXT,
+	TEST_JPG
+} from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 import event from "@testing-library/user-event";
-import { setupi18n } from "../core/src/i18n";
+
 import UploadButton from "./Index.svelte";
 
+const base_props = {
+	label: "Upload",
+	show_label: true,
+	interactive: true,
+	value: null as any,
+	file_count: "single" as "single" | "multiple" | "directory",
+	file_types: [] as string[],
+	size: "lg" as "sm" | "md" | "lg",
+	icon: null as any,
+	variant: "secondary" as "primary" | "secondary" | "stop"
+};
+
+const upload_props = {
+	...base_props,
+	root: "https://example.com",
+	client: mock_client()
+};
+
+run_shared_prop_tests({
+	component: UploadButton,
+	name: "UploadButton",
+	base_props,
+	has_label: false,
+	has_validation_error: false,
+	has_block_wrapper: false,
+	visible_false_hides: true
+});
+
 describe("UploadButton", () => {
-	afterEach(() => {
-		cleanup();
-		vi.restoreAllMocks();
+	afterEach(() => cleanup());
+
+	test("renders a button with the label text", async () => {
+		const { getByRole } = await render(UploadButton, {
+			...base_props,
+			label: "Upload a File"
+		});
+
+		expect(getByRole("button", { name: "Upload a File" })).toBeVisible();
+	});
+
+	test("button is enabled when interactive is true", async () => {
+		const { getByRole } = await render(UploadButton, {
+			...base_props,
+			interactive: true
+		});
+
+		expect(getByRole("button", { name: "Upload" })).toBeEnabled();
+	});
+
+	test("button is disabled when interactive is false", async () => {
+		const { getByRole } = await render(UploadButton, {
+			...base_props,
+			interactive: false
+		});
+
+		expect(getByRole("button", { name: "Upload" })).toBeDisabled();
+	});
+});
+
+describe("Props: file_count", () => {
+	afterEach(() => cleanup());
+
+	test("file_count='single' returns a single FileData, not an array", async () => {
+		const { get_data } = await render(UploadButton, {
+			...upload_props,
+			file_count: "single"
+		});
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(async () => {
+			const data = await get_data();
+			expect(data.value).not.toBeNull();
+		});
+		const data = await get_data();
+		expect(Array.isArray(data.value)).toBe(false);
+		expect(data.value).toHaveProperty("orig_name");
 	});
 
-	test.skip("Uploads with blob", async () => {
-		vi.mock("@gradio/client", async () => {
-			const actual = await vi.importActual("@gradio/client");
-			console.log(actual);
+	test("file_count='multiple' returns an array of FileData", async () => {
+		const { get_data } = await render(UploadButton, {
+			...upload_props,
+			file_count: "multiple"
+		});
+
+		await upload_file([TEST_TXT, TEST_JPG]);
+
+		await waitFor(async () => {
+			const data = await get_data();
+			expect(data.value).not.toBeNull();
+		});
+		const data = await get_data();
+		expect(Array.isArray(data.value)).toBe(true);
+		expect(data.value).toHaveLength(2);
+	});
 
-			return {
-				...actual,
-				prepare_files: () => [],
-				// upload: vi.fn((f) => new Promise((res) => res([]))),
-				upload_files: vi.fn((f) => new Promise((res) => res({})))
-			};
+	// Attribute assertion: directory upload can't be driven programmatically —
+	// webkitdirectory is the browser-native mechanism and there's no behavioural
+	// equivalent we can simulate in a unit test.
+	test("file_count='directory' sets webkitdirectory attribute on input", async () => {
+		const { getByTestId } = await render(UploadButton, {
+			...base_props,
+			file_count: "directory"
 		});
 
-		const api = await import("@gradio/client");
+		const input = getByTestId("Upload-upload-button");
+		expect(input).toHaveAttribute("webkitdirectory");
+	});
+});
 
-		setupi18n();
+describe("Props: file_types", () => {
+	afterEach(() => cleanup());
 
+	test("file_types maps category names to wildcard MIME types", async () => {
 		const { getByTestId } = await render(UploadButton, {
-			label: "file",
-			value: null,
-			root: "http://localhost:7860",
-			file_count: "1"
+			...base_props,
+			file_types: ["image", "audio"]
 		});
 
-		const item = getByTestId("file-upload-button"); // container.querySelectorAll("input")[0];
+		const input = getByTestId("Upload-upload-button");
+		expect(input).toHaveAttribute("accept", "image/*, audio/*");
+	});
 
-		const file = new File(["hello"], "my-audio.wav", { type: "audio/wav" });
-		await event.upload(item, file);
+	test("file_types passes dot-prefixed extensions through unchanged", async () => {
+		const { getByTestId } = await render(UploadButton, {
+			...base_props,
+			file_types: [".csv", ".json"]
+		});
 
-		expect(api.upload_files).toHaveBeenCalled();
+		const input = getByTestId("Upload-upload-button");
+		expect(input).toHaveAttribute("accept", ".csv, .json");
 	});
 
-	// we need mocks for this test now, no time atm.
-	test.skip("upload sets change event", async () => {
-		vi.mock("@gradio/client", async () => {
-			const actual = await vi.importActual("@gradio/client");
+	test("empty file_types array results in empty accept attribute", async () => {
+		const { getByTestId } = await render(UploadButton, {
+			...base_props,
+			file_types: []
+		});
+
+		const input = getByTestId("Upload-upload-button");
+		expect(input).toHaveAttribute("accept", "");
+	});
+
+	test("rejects files that do not match file_types and dispatches error", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			file_types: ["image"]
+		});
+
+		const upload = listen("upload");
+		const error = listen("error");
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(error).toHaveBeenCalledTimes(1);
+		});
+		expect(error).toHaveBeenCalledWith(
+			expect.stringContaining("Invalid file type")
+		);
+		expect(upload).not.toHaveBeenCalled();
+	});
+
+	test("accepts files matching a wildcard MIME category", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			file_types: ["image"]
+		});
+
+		const upload = listen("upload");
+
+		await upload_file(TEST_JPG);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	test("accepts files matching a dot-prefixed extension", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			file_types: [".txt"]
+		});
+
+		const upload = listen("upload");
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	test("multiple file_types each allow their matching files", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			file_types: ["image", ".txt"]
+		});
+
+		const upload = listen("upload");
+
+		await upload_file(TEST_JPG);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(2);
+		});
+	});
 
-			return {
-				...actual,
-				prepare_files: () => [],
-				// upload: vi.fn((f) => new Promise((res) => res([]))),
-				upload_files: vi.fn((f) => new Promise((res) => res({})))
-			};
+	test("rejects file not matching any of multiple file_types", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			file_types: ["image", "audio"]
 		});
 
-		await import("@gradio/client");
-		setupi18n();
-		const { component, getByTestId, wait_for_event } = await render(
-			UploadButton,
-			{
-				label: "file",
-				value: null,
-				root: "http://localhost:7860",
-				file_count: "1"
+		const upload = listen("upload");
+		const error = listen("error");
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(error).toHaveBeenCalledTimes(1);
+		});
+		expect(upload).not.toHaveBeenCalled();
+	});
+});
+
+describe("Props: icon", () => {
+	afterEach(() => cleanup());
+
+	test("icon renders an image inside the button when provided", async () => {
+		const { getByRole } = await render(UploadButton, {
+			...base_props,
+			icon: {
+				path: "icon.png",
+				url: "https://example.com/icon.png",
+				orig_name: "icon.png",
+				size: 100,
+				mime_type: "image/png"
 			}
+		});
+
+		expect(getByRole("img")).toHaveAttribute(
+			"src",
+			"https://example.com/icon.png"
+		);
+	});
+
+	test("no icon rendered when icon is null", async () => {
+		const { queryByRole } = await render(UploadButton, {
+			...base_props,
+			icon: null
+		});
+
+		expect(queryByRole("img")).not.toBeInTheDocument();
+	});
+});
+
+describe("Events", () => {
+	afterEach(() => cleanup());
+
+	test("no spurious change event on mount", async () => {
+		const { listen } = await render(UploadButton, {
+			...base_props,
+			value: null
+		});
+
+		const change = listen("change", { retrospective: true });
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("click event fires when button is clicked", async () => {
+		const { getByRole, listen } = await render(UploadButton, {
+			...upload_props
+		});
+
+		const click = listen("click");
+		await event.click(getByRole("button", { name: "Upload" }));
+
+		expect(click).toHaveBeenCalledTimes(1);
+	});
+
+	test("upload and change events fire after file upload", async () => {
+		const { listen } = await render(UploadButton, {
+			...upload_props
+		});
+
+		const upload = listen("upload");
+		const change = listen("change");
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("upload failure dispatches error event with the message", async () => {
+		const failing_upload = vi
+			.fn()
+			.mockRejectedValue(new Error("File too large"));
+		const { listen } = await render(UploadButton, {
+			...upload_props,
+			client: { ...mock_client(), upload: failing_upload }
+		});
+
+		const error = listen("error");
+
+		await upload_file(TEST_TXT);
+
+		await waitFor(() => {
+			expect(failing_upload).toHaveBeenCalled();
+		});
+
+		await waitFor(() => {
+			expect(error).toHaveBeenCalledTimes(1);
+		});
+		expect(error).toHaveBeenCalledWith("File too large");
+	});
+});
+
+describe("get_data / set_data", () => {
+	afterEach(() => cleanup());
+
+	test("get_data returns null initially", async () => {
+		const { get_data } = await render(UploadButton, {
+			...base_props,
+			value: null
+		});
+
+		const data = await get_data();
+		expect(data.value).toBeNull();
+	});
+
+	test("get_data returns initial value when mounted with one", async () => {
+		const { get_data } = await render(UploadButton, {
+			...base_props,
+			value: TEST_TXT
+		});
+
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_TXT);
+	});
+
+	test("set_data updates the value reported by get_data", async () => {
+		const { set_data, get_data } = await render(UploadButton, base_props);
+		await set_data({ value: TEST_TXT });
+		await waitFor(async () =>
+			expect((await get_data()).value).toEqual(TEST_TXT)
 		);
+	});
 
-		const item = getByTestId("file-upload-button"); //container.querySelectorAll("input")[0];
-		const file = new File(["hello"], "my-audio.wav", { type: "audio/wav" });
-		event.upload(item, file);
-		const mock = await wait_for_event("change");
-		expect(mock.callCount).toBe(1);
-		const [data] = component.$capture_state().value;
-		expect(data).toBeTruthy();
-		assert.equal(data.name, "my-audio.wav");
+	test("upload interaction is reflected in get_data", async () => {
+		const { get_data } = await render(UploadButton, upload_props);
+		await upload_file(TEST_TXT);
+		await waitFor(async () => expect((await get_data()).value).not.toBeNull());
 	});
 });
+
+describe("Edge cases", () => {
+	afterEach(() => cleanup());
+
+	test("max_file_size is forwarded to client.upload", async () => {
+		const upload_spy = vi.fn(async (file_data) => file_data);
+		await render(UploadButton, {
+			...upload_props,
+			max_file_size: 100,
+			client: { ...mock_client(), upload: upload_spy }
+		});
+		await upload_file(TEST_TXT);
+		await waitFor(() => expect(upload_spy).toHaveBeenCalled());
+		expect(upload_spy).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.anything(),
+			undefined,
+			100
+		);
+	});
+
+	test("no mount-time events with initial value set", async () => {
+		const { listen } = await render(UploadButton, {
+			...base_props,
+			value: TEST_TXT
+		});
+
+		const change = listen("change", { retrospective: true });
+		const upload = listen("upload", { retrospective: true });
+		expect(change).not.toHaveBeenCalled();
+		expect(upload).not.toHaveBeenCalled();
+	});
+});
+
+test.todo(
+	"VISUAL: variant='primary' renders the button with primary styling — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: variant='secondary' renders the button with secondary styling — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: variant='stop' renders the button with stop/red styling — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: size='sm' renders a small button — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: size='md' renders a medium button — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: size='lg' renders a large button — needs Playwright visual regression screenshot comparison"
+);

package/dist/Index.svelte

@@ -11,13 +11,7 @@
 	const props = $props();
 	const gradio = new Gradio<UploadButtonEvents, UploadButtonProps>(props);
 
-	let value = $state(gradio.props.value);
-
-	$effect(() => {
-		if (value !== gradio.props.value) {
-			gradio.props.value = value;
-		}
-	});
+	let value = $derived(gradio.props.value);
 
 	async function handle_event(
 		detail: null | FileData | FileData[],

package/dist/shared/UploadButton.svelte

@@ -2,6 +2,7 @@
 	import { tick } from "svelte";
 	import { BaseButton } from "@gradio/button";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
+	import { is_valid_mimetype } from "@gradio/upload";
 
 	let {
 		elem_id = "",
@@ -70,13 +71,20 @@
 	}
 
 	async function load_files(files: FileList): Promise<void> {
-		let _files: File[] = Array.from(files);
+		let _files: File[] = Array.from(files).filter((file) => {
+			const ext = "." + file.name.toLowerCase().split(".").pop();
+			if (is_valid_mimetype(accept_file_types, ext, file.type)) {
+				return true;
+			}
+			onerror?.(`Invalid file type only ${file_types?.join(", ")} allowed.`);
+			return false;
+		});
 
-		if (!files.length) {
+		if (!_files.length) {
 			return;
 		}
 		if (file_count === "single") {
-			_files = [files[0]];
+			_files = [_files[0]];
 		}
 		let all_file_data = await prepare_files(_files);
 		await tick();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/uploadbutton",
-  "version": "0.9.18",
+  "version": "0.10.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
   },
   "main": "./Index.svelte",
   "dependencies": {
-    "@gradio/button": "^0.6.5",
-    "@gradio/upload": "^0.17.7",
-    "@gradio/utils": "^0.12.0",
-    "@gradio/client": "^2.1.0"
+    "@gradio/button": "^0.7.0",
+    "@gradio/upload": "^0.17.10",
+    "@gradio/utils": "^0.12.2",
+    "@gradio/client": "^2.2.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"

package/shared/UploadButton.svelte

@@ -2,6 +2,7 @@
 	import { tick } from "svelte";
 	import { BaseButton } from "@gradio/button";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
+	import { is_valid_mimetype } from "@gradio/upload";
 
 	let {
 		elem_id = "",
@@ -70,13 +71,20 @@
 	}
 
 	async function load_files(files: FileList): Promise<void> {
-		let _files: File[] = Array.from(files);
+		let _files: File[] = Array.from(files).filter((file) => {
+			const ext = "." + file.name.toLowerCase().split(".").pop();
+			if (is_valid_mimetype(accept_file_types, ext, file.type)) {
+				return true;
+			}
+			onerror?.(`Invalid file type only ${file_types?.join(", ")} allowed.`);
+			return false;
+		});
 
-		if (!files.length) {
+		if (!_files.length) {
 			return;
 		}
 		if (file_count === "single") {
-			_files = [files[0]];
+			_files = [_files[0]];
 		}
 		let all_file_data = await prepare_files(_files);
 		await tick();