@gradio/upload 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -1,10 +1,68 @@
 # @gradio/upload
 
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`71f1a1f99`](https://github.com/gradio-app/gradio/commit/71f1a1f9931489d465c2c1302a5c8d768a3cd23a)]:
+  - @gradio/client@0.8.2
+  - @gradio/upload@0.5.1
+
+## 0.5.0
+
+### Highlights
+
+#### New `ImageEditor` component ([#6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))
+
+A brand new component, completely separate from `Image` that provides simple editing capabilities.
+
+- Set background images from file uploads, webcam, or just paste!
+- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
+- Paint on top of any image (or no image) and erase any mistakes!
+- The ImageEditor supports layers, confining draw and erase actions to that layer.
+- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
+- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.
+
+<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>
+
+```py
+
+def fn(im):
+    im["composite"] # the full canvas
+    im["background"] # the background image
+    im["layers"] # a list of individual layers
+
+
+im = gr.ImageEditor(
+    # decide which sources you'd like to accept
+    sources=["upload", "webcam", "clipboard"],
+    # set a cropsize constraint, can either be a ratio or a concrete [width, height]
+    crop_size="1:1",
+    # enable crop (or disable it)
+    transforms=["crop"],
+    # customise the brush
+    brush=Brush(
+      default_size="25", # or leave it as 'auto'
+      color_mode="fixed", # 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
+      default_color="hotpink", # html names are supported
+      colors=[
+        "rgba(0, 150, 150, 1)", # rgb(a)
+        "#fff", # hex rgb
+        "hsl(360, 120, 120)" # in fact any valid colorstring
+      ]
+    ),
+    brush=Eraser(default_size="25")
+)
+
+```
+
+Thanks [@pngwn](https://github.com/pngwn)!
+
 ## 0.4.2
 
 ### 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)!
+- [#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.4.1
 
@@ -188,4 +246,4 @@ From the backend, streamed outputs are served from the `/stream/` endpoint inste
 ### Patch Changes
 
 - Updated dependencies []:
-  - @gradio/atoms@0.0.2
+  - @gradio/atoms@0.0.2

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@gradio/upload",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.2.2",
-    "@gradio/icons": "^0.2.1",
-    "@gradio/client": "^0.8.1",
-    "@gradio/upload": "^0.4.2",
-    "@gradio/utils": "^0.2.0"
+    "@gradio/atoms": "^0.3.0",
+    "@gradio/client": "^0.8.2",
+    "@gradio/icons": "^0.3.0",
+    "@gradio/utils": "^0.2.0",
+    "@gradio/upload": "^0.5.1"
   },
   "main_changeset": true,
   "exports": {

package/src/Upload.svelte

@@ -14,6 +14,7 @@
 	export let disable_click = false;
 	export let root: string;
 	export let hidden = false;
+	export let format: "blob" | "file" = "file";
 	export let include_sources = false;
 	export let uploading = false;
 
@@ -63,7 +64,15 @@
 	async function load_files_from_upload(e: Event): Promise<void> {
 		const target = e.target as HTMLInputElement;
 		if (!target.files) return;
-		await load_files(Array.from(target.files));
+		if (format != "blob") {
+			await load_files(Array.from(target.files));
+		} else {
+			if (file_count === "single") {
+				dispatch("load", target.files[0]);
+				return;
+			}
+			dispatch("load", target.files);
+		}
 	}
 
 	function is_valid_mimetype(
@@ -107,6 +116,7 @@
 		class:boundedheight
 		class:flex
 		style:height={include_sources ? "calc(100% - 40px" : "100%"}
+		tabindex={hidden ? -1 : 0}
 		on:drag|preventDefault|stopPropagation
 		on:dragstart|preventDefault|stopPropagation
 		on:dragend|preventDefault|stopPropagation
@@ -121,6 +131,7 @@
 	>
 		<slot />
 		<input
+			aria-label="file upload"
 			type="file"
 			bind:this={hidden_upload}
 			on:change={load_files_from_upload}
@@ -140,8 +151,10 @@
 
 	.hidden {
 		display: none;
-		height: 0;
+		height: 0 !important;
 		position: absolute;
+		width: 0;
+		flex-grow: 0;
 	}
 
 	.center {