@gradio/upload 0.8.5 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @gradio/upload
 
+## 0.10.0
+
+### Features
+
+- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9.  Thanks @renovate!
+- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`.  Thanks @hannahblair!
+
+### 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!
+- [#8118](https://github.com/gradio-app/gradio/pull/8118) [`7aca673`](https://github.com/gradio-app/gradio/commit/7aca673b38a087533524b2fd8dd3a03e0e4bacfe) - Add eventsource polyfill for Node.js and browser environments.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.2
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/wasm@0.10.1
+
+## 0.9.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!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.1
+- @gradio/client@0.17.0
+- @gradio/upload@0.9.0
+- @gradio/utils@0.4.0
+
 ## 0.8.5
 
 ### Fixes

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@gradio/upload",
-  "version": "0.8.5",
+  "version": "0.10.0",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@gradio/client": "^0.18.0",
+    "@gradio/atoms": "^0.7.2",
     "@gradio/icons": "^0.4.0",
-    "@gradio/atoms": "^0.7.0",
-    "@gradio/client": "^0.16.0",
-    "@gradio/upload": "^0.8.5",
-    "@gradio/utils": "^0.3.2",
-    "@gradio/wasm": "^0.10.0"
+    "@gradio/upload": "^0.10.0",
+    "@gradio/utils": "^0.4.1",
+    "@gradio/wasm": "^0.10.1"
   },
   "main_changeset": true,
   "exports": {

package/src/Upload.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, getContext } from "svelte";
 	import type { FileData } from "@gradio/client";
-	import { upload_files, upload, prepare_files } from "@gradio/client";
+	import { prepare_files, type Client } from "@gradio/client";
 	import { _ } from "svelte-i18n";
 	import UploadProgress from "./UploadProgress.svelte";
 
@@ -18,14 +18,14 @@
 	export let uploading = false;
 	export let hidden_upload: HTMLInputElement | null = null;
 	export let show_progress = true;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream_factory"];
 
 	let upload_id: string;
 	let file_data: FileData[];
 	let accept_file_types: string | null;
 
-	// Needed for wasm support
-	const upload_fn = getContext<typeof upload_files>("upload_files");
-
 	const dispatch = createEventDispatcher();
 	const validFileTypes = ["image", "video", "audio", "text", "file"];
 	const processFileType = (type: string): string => {
@@ -83,10 +83,21 @@
 		await tick();
 		upload_id = Math.random().toString(36).substring(2, 15);
 		uploading = true;
-		const _file_data = await upload(file_data, root, upload_id, upload_fn);
-		dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
-		uploading = false;
-		return _file_data || [];
+		try {
+			const _file_data = await upload(
+				file_data,
+				root,
+				upload_id,
+				max_file_size ?? Infinity
+			);
+			dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
+			uploading = false;
+			return _file_data || [];
+		} catch (e) {
+			dispatch("error", (e as Error).message);
+			uploading = false;
+			return [];
+		}
 	}
 
 	export async function load_files(
@@ -96,7 +107,8 @@
 			return;
 		}
 		let _files: File[] = files.map(
-			(f) => new File([f], f.name, { type: f.type })
+			(f) =>
+				new File([f], f instanceof File ? f.name : "file", { type: f.type })
 		);
 		file_data = await prepare_files(_files);
 		return await handle_upload(file_data);
@@ -188,7 +200,7 @@
 	</button>
 {:else if uploading && show_progress}
 	{#if !hidden}
-		<UploadProgress {root} {upload_id} files={file_data} />
+		<UploadProgress {root} {upload_id} files={file_data} {stream_handler} />
 	{/if}
 {:else}
 	<button

package/src/UploadProgress.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { FileData } from "@gradio/client";
-	import { onMount, createEventDispatcher, getContext } from "svelte";
+	import { FileData, type Client } from "@gradio/client";
+	import { onMount, createEventDispatcher, onDestroy } from "svelte";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
 	export let upload_id: string;
 	export let root: string;
 	export let files: FileData[];
+	export let stream_handler: Client["stream_factory"];
 
-	let event_source: EventSource;
+	let stream: ReturnType<Client["stream_factory"]>;
 	let progress = false;
 	let current_file_upload: FileDataWithProgress;
 	let file_to_display: FileDataWithProgress;
@@ -36,19 +37,20 @@
 		return (file.progress * 100) / (file.size || 0) || 0;
 	}
 
-	const EventSource_factory = getContext<(url: URL) => EventSource>(
-		"EventSource_factory"
-	);
 	onMount(() => {
-		event_source = EventSource_factory(
+		stream = stream_handler(
 			new URL(`${root}/upload_progress?upload_id=${upload_id}`)
 		);
+
+		if (stream == null) {
+			throw new Error("Event source is not defined");
+		}
 		// Event listener for progress updates
-		event_source.onmessage = async function (event) {
+		stream.onmessage = async function (event) {
 			const _data = JSON.parse(event.data);
 			if (!progress) progress = true;
 			if (_data.msg === "done") {
-				event_source.close();
+				stream?.close();
 				dispatch("done");
 			} else {
 				current_file_upload = _data;
@@ -56,6 +58,9 @@
 			}
 		};
 	});
+	onDestroy(() => {
+		if (stream != null || stream != undefined) stream.close();
+	});
 
 	function calculateTotalProgress(files: FileData[]): number {
 		let totalProgress = 0;