@gradio/upload 0.17.10 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @gradio/upload
 
+## 0.18.1
+
+### Fixes
+
+- [#13597](https://github.com/gradio-app/gradio/pull/13597) [`7a595cb`](https://github.com/gradio-app/gradio/commit/7a595cb72d8a82151ee2231e86d20c91d0bb9062) - Fix ImageEditor brush texture resets.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/client@2.3.1
+
+## 0.18.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+
+## 0.17.10
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
 ## 0.17.10
 
 ### Fixes

package/dist/src/Upload.svelte

@@ -49,8 +49,8 @@
 		icon_upload?: boolean;
 		height?: number | string | undefined;
 		aria_label?: string | undefined;
-		upload_promise?: Promise<(FileData | null)[]>;
-		onload?: (data: FileData | FileData[] | Blob | File) => void;
+		upload_promise?: Promise<(FileData | null)[]> | null;
+		onload?: (data: any) => void;
 		onerror?: (error: string) => void;
 		children?: import("svelte").Snippet;
 	} = $props();
@@ -59,7 +59,7 @@
 		_open_file_upload();
 	}
 
-	let upload_id: string = "";
+	let upload_id = "";
 	let file_data: FileData[];
 	let accept_file_types: string | null = $state(null);
 	let use_post_upload_validation: boolean | null = null;
@@ -141,14 +141,19 @@
 		uploading = true;
 		upload_promise = new Promise(async (resolve) => {
 			try {
-				const _file_data = await upload(
-					file_data,
-					root,
-					upload_id,
-					max_file_size ?? Infinity
-				);
-				onload?.(file_count === "single" ? _file_data?.[0] : _file_data);
-				resolve(_file_data || []);
+				const _file_data =
+					(await upload(
+						file_data,
+						root,
+						upload_id,
+						max_file_size ?? Infinity
+					)) || [];
+				if (file_count === "single") {
+					if (_file_data[0] !== undefined) onload?.(_file_data[0]);
+				} else {
+					onload?.(_file_data);
+				}
+				resolve(_file_data);
 				uploading = false;
 			} catch (e) {
 				onerror?.((e as Error).message);

package/dist/src/Upload.svelte.d.ts

@@ -19,8 +19,8 @@ type $$ComponentProps = {
     icon_upload?: boolean;
     height?: number | string | undefined;
     aria_label?: string | undefined;
-    upload_promise?: Promise<(FileData | null)[]>;
-    onload?: (data: FileData | FileData[] | Blob | File) => void;
+    upload_promise?: Promise<(FileData | null)[]> | null;
+    onload?: (data: any) => void;
     onerror?: (error: string) => void;
     children?: import("svelte").Snippet;
 };

package/dist/src/UploadProgress.svelte

@@ -21,8 +21,6 @@
 	let stream: Awaited<ReturnType<Client["stream"]>>;
 	let progress = $state(false);
 	let current_file_upload = $state<FileDataWithProgress>();
-	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
-
 	let files_with_progress = $state<FileDataWithProgress[]>(
 		files.map((file) => {
 			return {
@@ -31,6 +29,7 @@
 			};
 		})
 	);
+	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
 
 	function handleProgress(filename: string, chunk_size: number): void {
 		// Find the corresponding file in the array and update its progress

package/dist/src/utils.d.ts

@@ -1,6 +1,7 @@
 export declare function is_valid_mimetype(file_accept: string | string[] | null, uploaded_file_extension: string, uploaded_file_type: string): boolean;
 interface DragActionOptions {
     disable_click?: boolean;
+    ignore_click_selector?: string;
     accepted_types?: string | string[] | null;
     mode?: "single" | "multiple" | "directory";
     on_drag_change?: (dragging: boolean) => void;

package/dist/src/utils.js

@@ -75,11 +75,17 @@ export function create_drag() {
                     _options.on_files?.(files);
                 }
             }
-            function handle_click() {
-                if (!_options.disable_click) {
-                    hidden_input.value = "";
-                    hidden_input.click();
+            function handle_click(e) {
+                const target = e.target;
+                const ignored_click_selector = _options.ignore_click_selector;
+                if (_options.disable_click ||
+                    (ignored_click_selector &&
+                        target instanceof Element &&
+                        target.closest(ignored_click_selector) !== null)) {
+                    return;
                 }
+                hidden_input.value = "";
+                hidden_input.click();
             }
             function handle_file_input_change() {
                 if (hidden_input.files) {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@gradio/upload",
-  "version": "0.17.10",
+  "version": "0.18.1",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/icons": "^0.15.1",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/client": "^2.2.1",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/client": "^2.3.1",
+    "@gradio/utils": "^0.13.0"
   },
   "main_changeset": true,
   "exports": {

package/src/Upload.svelte

@@ -49,8 +49,8 @@
 		icon_upload?: boolean;
 		height?: number | string | undefined;
 		aria_label?: string | undefined;
-		upload_promise?: Promise<(FileData | null)[]>;
-		onload?: (data: FileData | FileData[] | Blob | File) => void;
+		upload_promise?: Promise<(FileData | null)[]> | null;
+		onload?: (data: any) => void;
 		onerror?: (error: string) => void;
 		children?: import("svelte").Snippet;
 	} = $props();
@@ -59,7 +59,7 @@
 		_open_file_upload();
 	}
 
-	let upload_id: string = "";
+	let upload_id = "";
 	let file_data: FileData[];
 	let accept_file_types: string | null = $state(null);
 	let use_post_upload_validation: boolean | null = null;
@@ -141,14 +141,19 @@
 		uploading = true;
 		upload_promise = new Promise(async (resolve) => {
 			try {
-				const _file_data = await upload(
-					file_data,
-					root,
-					upload_id,
-					max_file_size ?? Infinity
-				);
-				onload?.(file_count === "single" ? _file_data?.[0] : _file_data);
-				resolve(_file_data || []);
+				const _file_data =
+					(await upload(
+						file_data,
+						root,
+						upload_id,
+						max_file_size ?? Infinity
+					)) || [];
+				if (file_count === "single") {
+					if (_file_data[0] !== undefined) onload?.(_file_data[0]);
+				} else {
+					onload?.(_file_data);
+				}
+				resolve(_file_data);
 				uploading = false;
 			} catch (e) {
 				onerror?.((e as Error).message);

package/src/UploadProgress.svelte

@@ -21,8 +21,6 @@
 	let stream: Awaited<ReturnType<Client["stream"]>>;
 	let progress = $state(false);
 	let current_file_upload = $state<FileDataWithProgress>();
-	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
-
 	let files_with_progress = $state<FileDataWithProgress[]>(
 		files.map((file) => {
 			return {
@@ -31,6 +29,7 @@
 			};
 		})
 	);
+	let file_to_display = $derived(current_file_upload || files_with_progress[0]);
 
 	function handleProgress(filename: string, chunk_size: number): void {
 		// Find the corresponding file in the array and update its progress

package/src/utils.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { create_drag } from "./utils";
+
+describe("create_drag", () => {
+	afterEach(() => {
+		document.body.innerHTML = "";
+		vi.restoreAllMocks();
+	});
+
+	test("does not open the file input when an ignored child is clicked", () => {
+		const click = vi
+			.spyOn(HTMLInputElement.prototype, "click")
+			.mockImplementation(() => {});
+		const node = document.createElement("div");
+		const toolbar = document.createElement("div");
+		const button = document.createElement("button");
+
+		toolbar.className = "toolbar-wrap";
+		toolbar.appendChild(button);
+		node.appendChild(toolbar);
+		document.body.appendChild(node);
+
+		const { drag } = create_drag();
+		const action = drag(node, { ignore_click_selector: ".toolbar-wrap" });
+
+		button.click();
+
+		expect(click).not.toHaveBeenCalled();
+		action.destroy();
+	});
+
+	test("opens the file input when the dropzone is clicked", () => {
+		const click = vi
+			.spyOn(HTMLInputElement.prototype, "click")
+			.mockImplementation(() => {});
+		const node = document.createElement("div");
+
+		document.body.appendChild(node);
+
+		const { drag } = create_drag();
+		const action = drag(node, { ignore_click_selector: ".toolbar-wrap" });
+
+		node.click();
+
+		expect(click).toHaveBeenCalledOnce();
+		action.destroy();
+	});
+});

package/src/utils.ts

@@ -34,6 +34,7 @@ export function is_valid_mimetype(
 
 interface DragActionOptions {
 	disable_click?: boolean;
+	ignore_click_selector?: string;
 	accepted_types?: string | string[] | null;
 	mode?: "single" | "multiple" | "directory";
 	on_drag_change?: (dragging: boolean) => void;
@@ -116,11 +117,20 @@ export function create_drag(): {
 				}
 			}
 
-			function handle_click(): void {
-				if (!_options.disable_click) {
-					hidden_input.value = "";
-					hidden_input.click();
+			function handle_click(e: MouseEvent): void {
+				const target = e.target;
+				const ignored_click_selector = _options.ignore_click_selector;
+				if (
+					_options.disable_click ||
+					(ignored_click_selector &&
+						target instanceof Element &&
+						target.closest(ignored_click_selector) !== null)
+				) {
+					return;
 				}
+
+				hidden_input.value = "";
+				hidden_input.click();
 			}
 
 			function handle_file_input_change(): void {