@gradio/uploadbutton 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @gradio/uploadbutton
 
+## 0.11.0
+
+### Features
+
+- [`db9699e`](https://github.com/gradio-app/gradio/commit/db9699e0bfd364ef7ca104e348618cf235d1d0be) - Name rejected files in upload errors and fix a Document leak in sanitize.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.19.0
+- @gradio/client@2.7.1
+- @gradio/button@0.8.3
+
+## 0.10.2
+
+### Dependency updates
+
+- @gradio/utils@0.14.2
+- @gradio/client@2.7.0
+
+## 0.10.2
+
+### Dependency updates
+
+- @gradio/client@2.6.0
+- @gradio/utils@0.14.1
+- @gradio/upload@0.18.3
+
+## 0.10.2
+
+### Dependency updates
+
+- @gradio/client@2.5.1
+
+## 0.10.2
+
+### Dependency updates
+
+- @gradio/client@2.5.0
+
+## 0.10.2
+
+### Dependency updates
+
+- @gradio/client@2.4.0
+- @gradio/utils@0.14.0
+- @gradio/upload@0.18.2
+- @gradio/button@0.8.2
+
+## 0.10.1
+
+### Dependency updates
+
+- @gradio/button@0.8.1
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+
 ## 0.10.1
 
 ### Dependency updates

package/Index.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
 </script>
 

package/UploadButton.test.ts

@@ -6,7 +6,8 @@ import {
 	upload_file,
 	mock_client,
 	TEST_TXT,
-	TEST_JPG
+	TEST_JPG,
+	TEST_PDF
 } from "@self/tootils/render";
 import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 import event from "@testing-library/user-event";
@@ -176,6 +177,25 @@ describe("Props: file_types", () => {
 		expect(upload).not.toHaveBeenCalled();
 	});
 
+	test("reports rejected filenames together while uploading valid files", async () => {
+		const { listen, get_data } = await render(UploadButton, {
+			...upload_props,
+			file_count: "multiple",
+			file_types: [".txt"]
+		});
+		const error = listen("error");
+		const upload = listen("upload");
+		await upload_file([TEST_JPG, TEST_TXT, TEST_PDF]);
+		await waitFor(() => expect(upload).toHaveBeenCalledTimes(1));
+		expect(error).toHaveBeenCalledTimes(1);
+		expect(error).toHaveBeenCalledWith(
+			`Invalid file types: ${TEST_JPG.orig_name}, ${TEST_PDF.orig_name}. Only .txt allowed.`
+		);
+		expect((await get_data()).value).toEqual([
+			expect.objectContaining({ orig_name: TEST_TXT.orig_name })
+		]);
+	});
+
 	test("accepts files matching a wildcard MIME category", async () => {
 		const { listen } = await render(UploadButton, {
 			...upload_props,
@@ -410,27 +430,3 @@ describe("Edge cases", () => {
 		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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
 </script>
 

package/dist/shared/UploadButton.svelte

@@ -2,7 +2,11 @@
 	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";
+	import {
+		invalid_file_type_message,
+		is_valid_mimetype,
+		to_accept_attribute
+	} from "@gradio/upload";
 
 	let {
 		elem_id = "",
@@ -71,14 +75,19 @@
 	}
 
 	async function load_files(files: FileList): Promise<void> {
+		const invalid_files: File[] = [];
 		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)) {
+			if (
+				is_valid_mimetype(accept_file_types, file.name.toLowerCase(), file.type)
+			) {
 				return true;
 			}
-			onerror?.(`Invalid file type only ${file_types?.join(", ")} allowed.`);
+			invalid_files.push(file);
 			return false;
 		});
+		if (invalid_files.length) {
+			onerror?.(invalid_file_type_message(invalid_files, file_types));
+		}
 
 		if (!_files.length) {
 			return;
@@ -118,7 +127,7 @@
 
 <input
 	class="hide"
-	accept={accept_file_types}
+	accept={to_accept_attribute(accept_file_types)}
 	type="file"
 	bind:this={hidden_upload}
 	onchange={load_files_from_upload}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/uploadbutton",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
   },
   "main": "./Index.svelte",
   "dependencies": {
-    "@gradio/button": "^0.8.0",
-    "@gradio/client": "^2.3.0",
-    "@gradio/upload": "^0.18.0",
-    "@gradio/utils": "^0.13.0"
+    "@gradio/button": "^0.8.3",
+    "@gradio/client": "^2.7.1",
+    "@gradio/upload": "^0.19.0",
+    "@gradio/utils": "^0.14.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@gradio/preview": "^0.17.1"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"

package/shared/UploadButton.svelte

@@ -2,7 +2,11 @@
 	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";
+	import {
+		invalid_file_type_message,
+		is_valid_mimetype,
+		to_accept_attribute
+	} from "@gradio/upload";
 
 	let {
 		elem_id = "",
@@ -71,14 +75,19 @@
 	}
 
 	async function load_files(files: FileList): Promise<void> {
+		const invalid_files: File[] = [];
 		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)) {
+			if (
+				is_valid_mimetype(accept_file_types, file.name.toLowerCase(), file.type)
+			) {
 				return true;
 			}
-			onerror?.(`Invalid file type only ${file_types?.join(", ")} allowed.`);
+			invalid_files.push(file);
 			return false;
 		});
+		if (invalid_files.length) {
+			onerror?.(invalid_file_type_message(invalid_files, file_types));
+		}
 
 		if (!_files.length) {
 			return;
@@ -118,7 +127,7 @@
 
 <input
 	class="hide"
-	accept={accept_file_types}
+	accept={to_accept_attribute(accept_file_types)}
 	type="file"
 	bind:this={hidden_upload}
 	onchange={load_files_from_upload}