@gradio/uploadbutton 0.5.8 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @gradio/uploadbutton
 
+## 0.6.1
+
+### Fixes
+
+- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/button@0.2.33
+
+## 0.6.0
+
+### Highlights
+
+#### Setting File Upload Limits ([#7909](https://github.com/gradio-app/gradio/pull/7909) [`2afca65`](https://github.com/gradio-app/gradio/commit/2afca6541912b37dc84f447c7ad4af21607d7c72))
+
+We have added a `max_file_size` size parameter to `launch()` that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).
+
+The following code snippet sets a max file size of 5 megabytes.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
+![max_file_size_upload](https://github.com/gradio-app/gradio/assets/41651716/7547330c-a082-4901-a291-3f150a197e45)
+
+
+#### Error states can now be cleared
+
+When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the `x` icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.
+
+![error_modal_calculator](https://github.com/gradio-app/gradio/assets/41651716/16cb071c-accd-45a6-9c18-0dea27d4bd98)
+
+ Thanks @freddyaboulton!
+
+### Fixes
+
+- [#8066](https://github.com/gradio-app/gradio/pull/8066) [`624f9b9`](https://github.com/gradio-app/gradio/commit/624f9b9477f74a581a6c14119234f9efdfcda398) - make gradio dev tools a local dependency rather than bundling.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/client@0.17.0
+- @gradio/button@0.2.32
+- @gradio/upload@0.9.0
+- @gradio/utils@0.4.0
+
 ## 0.5.8
 
 ### Dependency updates

package/Index.svelte

@@ -24,6 +24,7 @@
 		change: never;
 		upload: never;
 		click: never;
+		error: string;
 	}>;
 	export let interactive: boolean;
 
@@ -53,9 +54,14 @@
 	{disabled}
 	{variant}
 	{label}
+	max_file_size={gradio.max_file_size}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}
+	on:error={({ detail }) => {
+		gradio.dispatch("error", detail);
+	}}
+	upload={gradio.client.upload}
 >
 	{label ? gradio.i18n(label) : ""}
 </UploadButton>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/uploadbutton",
-  "version": "0.5.8",
+  "version": "0.6.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,9 +13,12 @@
   },
   "main": "./Index.svelte",
   "dependencies": {
-    "@gradio/button": "^0.2.31",
-    "@gradio/client": "^0.16.0",
-    "@gradio/upload": "^0.8.5",
-    "@gradio/utils": "^0.3.2"
+    "@gradio/button": "^0.2.33",
+    "@gradio/client": "^0.18.0",
+    "@gradio/utils": "^0.4.1",
+    "@gradio/upload": "^0.10.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.9.0"
   }
 }

package/shared/UploadButton.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
-	import { tick, createEventDispatcher, getContext } from "svelte";
+	import { tick, createEventDispatcher } from "svelte";
 	import { BaseButton } from "@gradio/button";
-	import {
-		upload,
-		prepare_files,
-		type FileData,
-		type upload_files
-	} from "@gradio/client";
+	import { prepare_files, type FileData, type Client } from "@gradio/client";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -22,12 +17,11 @@
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let disabled = false;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
 
 	const dispatch = createEventDispatcher();
 
-	// Needed for wasm support
-	const upload_fn = getContext<typeof upload_files>("upload_files");
-
 	let hidden_upload: HTMLInputElement;
 	let accept_file_types: string | null;
 
@@ -50,6 +44,7 @@
 
 	async function load_files(files: FileList): Promise<void> {
 		let _files: File[] = Array.from(files);
+
 		if (!files.length) {
 			return;
 		}
@@ -59,9 +54,14 @@
 		let all_file_data = await prepare_files(_files);
 		await tick();
 
-		all_file_data = (
-			await upload(all_file_data, root, undefined, upload_fn)
-		)?.filter((x) => x !== null) as FileData[];
+		try {
+			all_file_data = (
+				await upload(all_file_data, root, undefined, max_file_size ?? Infinity)
+			)?.filter((x) => x !== null) as FileData[];
+		} catch (e) {
+			dispatch("error", (e as Error).message);
+			return;
+		}
 		value = file_count === "single" ? all_file_data?.[0] : all_file_data;
 		dispatch("change", value);
 		dispatch("upload", value);