@gradio/image 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/image
 
+## 0.3.6
+
+### Fixes
+
+- [#6441](https://github.com/gradio-app/gradio/pull/6441) [`2f805a7dd`](https://github.com/gradio-app/gradio/commit/2f805a7dd3d2b64b098f659dadd5d01258290521) - Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.3.5
 
 ### Patch Changes
@@ -196,4 +202,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 ### Features
 
-- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
+- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!

package/Index.svelte

@@ -61,7 +61,9 @@
 		share: ShareData;
 	}>;
 
-	$: value?.url && gradio.dispatch("change");
+	$: url = _value?.url;
+	$: url && gradio.dispatch("change");
+
 	let dragging: boolean;
 	let active_tool: null | "webcam" = null;
 </script>
@@ -127,7 +129,10 @@
 			{root}
 			{sources}
 			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => gradio.dispatch("clear")}
+			on:clear={() => {
+				gradio.dispatch("clear");
+				gradio.dispatch("change");
+			}}
 			on:stream={() => gradio.dispatch("stream")}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.2.1",
+    "@gradio/atoms": "^0.2.2",
     "@gradio/client": "^0.8.1",
-    "@gradio/statustracker": "^0.3.1",
-    "@gradio/icons": "^0.2.0",
-    "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.4.1",
-    "@gradio/wasm": "^0.3.0"
+    "@gradio/statustracker": "^0.3.2",
+    "@gradio/upload": "^0.4.2",
+    "@gradio/icons": "^0.2.1",
+    "@gradio/wasm": "^0.3.0",
+    "@gradio/utils": "^0.2.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImagePreview.svelte

@@ -40,7 +40,7 @@
 			<a
 				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
-				download={"image"}
+				download={value.orig_name || "image"}
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>

package/shared/ImageUploader.svelte

@@ -33,10 +33,12 @@
 	export let i18n: I18nFormatter;
 
 	let upload: Upload;
+	let uploading = false;
 	export let active_tool: "webcam" | null = null;
 
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
 		value = normalise_file(detail, root, null);
+		dispatch("upload");
 	}
 
 	async function handle_save(img_blob: Blob | any): Promise<void> {
@@ -52,6 +54,8 @@
 		pending = false;
 	}
 
+	$: if (uploading) value = null;
+
 	$: value && !value.url && (value = normalise_file(value, root, null));
 
 	const dispatch = createEventDispatcher<{
@@ -111,6 +115,7 @@
 					for (let i = 0; i < items.length; i++) {
 						const type = items[i].types.find((t) => t.startsWith("image/"));
 						if (type) {
+							value = null;
 							items[i].getType(type).then(async (blob) => {
 								const f = await upload.load_files([
 									new File([blob], `clipboard.${type.replace("image/", "")}`)
@@ -139,12 +144,18 @@
 
 <div data-testid="image" class="image-container">
 	{#if value?.url}
-		<ClearImage on:remove_image={() => (value = null)} />
+		<ClearImage
+			on:remove_image={() => {
+				value = null;
+				dispatch("clear");
+			}}
+		/>
 	{/if}
 	<div class="upload-container">
 		<Upload
 			hidden={value !== null || active_tool === "webcam"}
 			bind:this={upload}
+			bind:uploading
 			bind:dragging
 			filetype="image/*"
 			on:load={handle_upload}
@@ -187,6 +198,7 @@
 					on:click={() => handle_toolbar(source)}
 					Icon={sources_meta[source].icon}
 					size="large"
+					label="{source}-image-toolbar-btn"
 					padded={false}
 				/>
 			{/each}