@gradio/upload 0.18.0 → 0.18.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @gradio/upload
 
+## 0.18.2
+
+### Features
+
+- [#13601](https://github.com/gradio-app/gradio/pull/13601) [`0ee5cc8`](https://github.com/gradio-app/gradio/commit/0ee5cc80e2915e5a1b074c892490a62f165cd80d) - Preserve browser-visible proxy origins for frontend assets and API requests, and retain app-level FastAPI root paths.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/client@2.4.0
+- @gradio/utils@0.14.0
+- @gradio/atoms@0.26.1
+
+## 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

package/dist/src/UploadProgress.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { FileData, type Client } from "@gradio/client";
 	import { onMount, onDestroy } from "svelte";
+	import { resolve_current_origin_url } from "@gradio/utils";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
@@ -46,9 +47,11 @@
 	}
 
 	onMount(async () => {
-		stream = await stream_handler(
-			new URL(`${root}/gradio_api/upload_progress?upload_id=${upload_id}`)
+		const upload_progress_url = resolve_current_origin_url(
+			root,
+			`/gradio_api/upload_progress?upload_id=${upload_id}`
 		);
+		stream = await stream_handler(upload_progress_url);
 
 		if (stream == null) {
 			throw new Error("Event source is not defined");

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.18.0",
+  "version": "0.18.2",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.25.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/client": "^2.3.0",
-    "@gradio/utils": "^0.13.0"
+    "@gradio/atoms": "^0.26.1",
+    "@gradio/client": "^2.4.0",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/utils": "^0.14.0"
   },
   "main_changeset": true,
   "exports": {

package/src/UploadProgress.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { FileData, type Client } from "@gradio/client";
 	import { onMount, onDestroy } from "svelte";
+	import { resolve_current_origin_url } from "@gradio/utils";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
@@ -46,9 +47,11 @@
 	}
 
 	onMount(async () => {
-		stream = await stream_handler(
-			new URL(`${root}/gradio_api/upload_progress?upload_id=${upload_id}`)
+		const upload_progress_url = resolve_current_origin_url(
+			root,
+			`/gradio_api/upload_progress?upload_id=${upload_id}`
 		);
+		stream = await stream_handler(upload_progress_url);
 
 		if (stream == null) {
 			throw new Error("Event source is not defined");

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 {