@gradio/upload 0.15.7 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gradio/upload
 
+## 0.16.0
+
+### Features
+
+- [#10635](https://github.com/gradio-app/gradio/pull/10635) [`2f68c9d`](https://github.com/gradio-app/gradio/commit/2f68c9d988dcbc53a0b8e53bdb1de49c9c8c65d8) - Refactor and redesign `ImageEditor` component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.15.0
+- @gradio/icons@0.11.0
+
 ## 0.15.7
 
 ### Dependency updates

package/dist/src/Upload.svelte

@@ -2,6 +2,8 @@
 import { prepare_files } from "@gradio/client";
 import { _ } from "svelte-i18n";
 import UploadProgress from "./UploadProgress.svelte";
+import { create_drag } from "./utils";
+const { drag, open_file_upload: _open_file_upload } = create_drag();
 export let filetype = null;
 export let dragging = false;
 export let boundedheight = true;
@@ -13,7 +15,6 @@ export let root;
 export let hidden = false;
 export let format = "file";
 export let uploading = false;
-export let hidden_upload = null;
 export let show_progress = true;
 export let max_file_size = null;
 export let upload;
@@ -21,6 +22,9 @@ export let stream_handler;
 export let icon_upload = false;
 export let height = void 0;
 export let aria_label = void 0;
+export function open_upload() {
+  _open_file_upload();
+}
 let upload_id;
 let file_data;
 let accept_file_types;
@@ -63,9 +67,6 @@ $:
     filetype = filetype.map(process_file_type);
     accept_file_types = filetype.join(", ");
   }
-function updateDragging() {
-  dragging = !dragging;
-}
 export function paste_clipboard() {
   navigator.clipboard.read().then(async (items) => {
     for (let i = 0; i < items.length; i++) {
@@ -84,12 +85,7 @@ export function paste_clipboard() {
   });
 }
 export function open_file_upload() {
-  if (disable_click)
-    return;
-  if (hidden_upload) {
-    hidden_upload.value = "";
-    hidden_upload.click();
-  }
+  _open_file_upload();
 }
 async function handle_upload(file_data2) {
   await tick();
@@ -111,6 +107,23 @@ async function handle_upload(file_data2) {
     return [];
   }
 }
+function is_valid_mimetype(file_accept, uploaded_file_extension, uploaded_file_type) {
+  if (!file_accept || file_accept === "*" || file_accept === "file/*" || Array.isArray(file_accept) && file_accept.some((accept) => accept === "*" || accept === "file/*")) {
+    return true;
+  }
+  let acceptArray;
+  if (typeof file_accept === "string") {
+    acceptArray = file_accept.split(",").map((s) => s.trim());
+  } else if (Array.isArray(file_accept)) {
+    acceptArray = file_accept;
+  } else {
+    return false;
+  }
+  return acceptArray.includes(uploaded_file_extension) || acceptArray.some((type) => {
+    const [category] = type.split("/").map((s) => s.trim());
+    return type.endsWith("/*") && uploaded_file_type.startsWith(category + "/");
+  });
+}
 export async function load_files(files) {
   if (!files.length) {
     return;
@@ -155,42 +168,8 @@ function is_valid_file(file) {
     return file.type === processed_type;
   });
 }
-async function load_files_from_upload(e) {
-  const target = e.target;
-  if (!target.files)
-    return;
-  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(file_accept, uploaded_file_extension, uploaded_file_type) {
-  if (!file_accept || file_accept === "*" || file_accept === "file/*" || Array.isArray(file_accept) && file_accept.some((accept) => accept === "*" || accept === "file/*")) {
-    return true;
-  }
-  let acceptArray;
-  if (typeof file_accept === "string") {
-    acceptArray = file_accept.split(",").map((s) => s.trim());
-  } else if (Array.isArray(file_accept)) {
-    acceptArray = file_accept;
-  } else {
-    return false;
-  }
-  return acceptArray.includes(uploaded_file_extension) || acceptArray.some((type) => {
-    const [category] = type.split("/").map((s) => s.trim());
-    return type.endsWith("/*") && uploaded_file_type.startsWith(category + "/");
-  });
-}
-async function loadFilesFromDrop(e) {
-  dragging = false;
-  if (!e.dataTransfer?.files)
-    return;
-  const files_to_load = Array.from(e.dataTransfer.files).filter((file) => {
+async function load_files_from_upload(files) {
+  const files_to_load = files.filter((file) => {
     const file_extension = "." + file.name.split(".").pop();
     if (file_extension && is_valid_mimetype(accept_file_types, file_extension, file.type)) {
       return true;
@@ -253,32 +232,17 @@ async function loadFilesFromDrop(e) {
 					: height
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
-		on:drag|preventDefault|stopPropagation
-		on:dragstart|preventDefault|stopPropagation
-		on:dragend|preventDefault|stopPropagation
-		on:dragover|preventDefault|stopPropagation
-		on:dragenter|preventDefault|stopPropagation
-		on:dragleave|preventDefault|stopPropagation
-		on:drop|preventDefault|stopPropagation
-		on:click={open_file_upload}
-		on:drop={loadFilesFromDrop}
-		on:dragenter={updateDragging}
-		on:dragleave={updateDragging}
+		use:drag={{
+			on_drag_change: (dragging) => (dragging = dragging),
+			on_files: (files) => load_files_from_upload(files),
+			accepted_types: accept_file_types,
+			mode: file_count,
+			disable_click
+		}}
 		aria-label={aria_label || "Click to upload or drop files"}
 		aria-dropeffect="copy"
 	>
 		<slot />
-		<input
-			aria-label="File upload"
-			data-testid="file-upload"
-			type="file"
-			bind:this={hidden_upload}
-			on:change={load_files_from_upload}
-			accept={accept_file_types || undefined}
-			multiple={file_count === "multiple" || undefined}
-			webkitdirectory={file_count === "directory" || undefined}
-			mozdirectory={file_count === "directory" || undefined}
-		/>
 	</button>
 {/if}
 
@@ -312,10 +276,6 @@ async function loadFilesFromDrop(e) {
 		cursor: default;
 	}
 
-	input {
-		display: none;
-	}
-
 	.icon-mode {
 		position: absolute !important;
 		width: var(--size-4);

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

@@ -14,7 +14,6 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         format?: ("blob" | "file") | undefined;
         uploading?: boolean | undefined;
-        hidden_upload?: (HTMLInputElement | null) | undefined;
         show_progress?: boolean | undefined;
         max_file_size?: (number | null) | undefined;
         upload: Client["upload"];
@@ -22,18 +21,12 @@ declare const __propDef: {
         icon_upload?: boolean | undefined;
         height?: number | string | undefined;
         aria_label?: string | undefined;
+        open_upload?: (() => void) | undefined;
         paste_clipboard?: (() => void) | undefined;
         open_file_upload?: (() => void) | undefined;
         load_files?: ((files: File[] | Blob[]) => Promise<(FileData | null)[] | void>) | undefined;
     };
     events: {
-        drag: DragEvent;
-        dragstart: DragEvent;
-        dragend: DragEvent;
-        dragover: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        drop: DragEvent;
         load: CustomEvent<any>;
         error: CustomEvent<any>;
     } & {
@@ -47,6 +40,7 @@ export type UploadProps = typeof __propDef.props;
 export type UploadEvents = typeof __propDef.events;
 export type UploadSlots = typeof __propDef.slots;
 export default class Upload extends SvelteComponent<UploadProps, UploadEvents, UploadSlots> {
+    get open_upload(): () => void;
     get paste_clipboard(): () => void;
     get open_file_upload(): () => void;
     get load_files(): (files: File[] | Blob[]) => Promise<(FileData | null)[] | void>;

package/dist/src/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
+export { create_drag } from "./utils";

package/dist/src/index.js

@@ -1,2 +1,3 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
+export { create_drag } from "./utils";

package/dist/src/utils.d.ts

@@ -0,0 +1,16 @@
+interface DragActionOptions {
+    disable_click?: boolean;
+    accepted_types?: string | string[] | null;
+    mode?: "single" | "multiple" | "directory";
+    on_drag_change?: (dragging: boolean) => void;
+    on_files?: (files: File[]) => void;
+}
+type ActionReturn = {
+    update: (new_options: DragActionOptions) => void;
+    destroy: () => void;
+};
+export declare function create_drag(): {
+    drag: (node: HTMLElement, options: DragActionOptions) => ActionReturn;
+    open_file_upload: () => void;
+};
+export {};

package/dist/src/utils.js

@@ -0,0 +1,107 @@
+export function create_drag() {
+    let hidden_input;
+    let _options;
+    return {
+        drag(node, options = {}) {
+            _options = options;
+            // Create and configure hidden file input
+            function setup_hidden_input() {
+                hidden_input = document.createElement("input");
+                hidden_input.type = "file";
+                hidden_input.style.display = "none";
+                hidden_input.setAttribute("aria-label", "File upload");
+                hidden_input.setAttribute("data-testid", "file-upload");
+                const accept_options = Array.isArray(_options.accepted_types)
+                    ? _options.accepted_types.join(",")
+                    : _options.accepted_types || undefined;
+                if (accept_options) {
+                    hidden_input.accept = accept_options;
+                }
+                hidden_input.multiple = _options.mode === "multiple" || false;
+                if (_options.mode === "directory") {
+                    hidden_input.webkitdirectory = true;
+                    hidden_input.setAttribute("directory", "");
+                    hidden_input.setAttribute("mozdirectory", "");
+                }
+                node.appendChild(hidden_input);
+            }
+            setup_hidden_input();
+            function handle_drag(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            function handle_drag_enter(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                _options.on_drag_change?.(true);
+            }
+            function handle_drag_leave(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                _options.on_drag_change?.(false);
+            }
+            function handle_drop(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                _options.on_drag_change?.(false);
+                if (!e.dataTransfer?.files)
+                    return;
+                const files = Array.from(e.dataTransfer.files);
+                if (files.length > 0) {
+                    _options.on_files?.(files);
+                }
+            }
+            function handle_click() {
+                if (!_options.disable_click) {
+                    hidden_input.value = "";
+                    hidden_input.click();
+                }
+            }
+            function handle_file_input_change() {
+                if (hidden_input.files) {
+                    const files = Array.from(hidden_input.files);
+                    if (files.length > 0) {
+                        _options.on_files?.(files);
+                    }
+                }
+            }
+            // Add all event listeners
+            node.addEventListener("drag", handle_drag);
+            node.addEventListener("dragstart", handle_drag);
+            node.addEventListener("dragend", handle_drag);
+            node.addEventListener("dragover", handle_drag);
+            node.addEventListener("dragenter", handle_drag_enter);
+            node.addEventListener("dragleave", handle_drag_leave);
+            node.addEventListener("drop", handle_drop);
+            node.addEventListener("click", handle_click);
+            hidden_input.addEventListener("change", handle_file_input_change);
+            return {
+                update(new_options) {
+                    _options = new_options;
+                    // Recreate hidden input with new options
+                    hidden_input.remove();
+                    setup_hidden_input();
+                    hidden_input.addEventListener("change", handle_file_input_change);
+                },
+                destroy() {
+                    node.removeEventListener("drag", handle_drag);
+                    node.removeEventListener("dragstart", handle_drag);
+                    node.removeEventListener("dragend", handle_drag);
+                    node.removeEventListener("dragover", handle_drag);
+                    node.removeEventListener("dragenter", handle_drag_enter);
+                    node.removeEventListener("dragleave", handle_drag_leave);
+                    node.removeEventListener("drop", handle_drop);
+                    node.removeEventListener("click", handle_click);
+                    hidden_input.removeEventListener("change", handle_file_input_change);
+                    hidden_input.remove();
+                }
+            };
+        },
+        open_file_upload() {
+            if (hidden_input) {
+                hidden_input.value = "";
+                hidden_input.click();
+            }
+        }
+    };
+}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@gradio/upload",
-  "version": "0.15.7",
+  "version": "0.16.0",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/icons": "^0.10.0",
-    "@gradio/atoms": "^0.14.1",
-    "@gradio/client": "^1.14.1",
+    "@gradio/icons": "^0.11.0",
     "@gradio/wasm": "^0.18.1",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/utils": "^0.10.1",
+    "@gradio/client": "^1.14.1",
+    "@gradio/atoms": "^0.15.0"
   },
   "main_changeset": true,
   "exports": {

package/src/Upload.svelte

@@ -4,6 +4,9 @@
 	import { prepare_files, type Client } from "@gradio/client";
 	import { _ } from "svelte-i18n";
 	import UploadProgress from "./UploadProgress.svelte";
+	import { create_drag } from "./utils";
+
+	const { drag, open_file_upload: _open_file_upload } = create_drag();
 
 	export let filetype: string | string[] | null = null;
 	export let dragging = false;
@@ -16,7 +19,6 @@
 	export let hidden = false;
 	export let format: "blob" | "file" = "file";
 	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"];
@@ -24,7 +26,9 @@
 	export let icon_upload = false;
 	export let height: number | string | undefined = undefined;
 	export let aria_label: string | undefined = undefined;
-
+	export function open_upload(): void {
+		_open_file_upload();
+	}
 	let upload_id: string;
 	let file_data: FileData[];
 	let accept_file_types: string | null;
@@ -70,10 +74,6 @@
 		accept_file_types = filetype.join(", ");
 	}
 
-	function updateDragging(): void {
-		dragging = !dragging;
-	}
-
 	export function paste_clipboard(): void {
 		navigator.clipboard.read().then(async (items) => {
 			for (let i = 0; i < items.length; i++) {
@@ -93,11 +93,7 @@
 	}
 
 	export function open_file_upload(): void {
-		if (disable_click) return;
-		if (hidden_upload) {
-			hidden_upload.value = "";
-			hidden_upload.click();
-		}
+		_open_file_upload();
 	}
 
 	async function handle_upload(
@@ -123,6 +119,40 @@
 		}
 	}
 
+	function is_valid_mimetype(
+		file_accept: string | string[] | null,
+		uploaded_file_extension: string,
+		uploaded_file_type: string
+	): boolean {
+		if (
+			!file_accept ||
+			file_accept === "*" ||
+			file_accept === "file/*" ||
+			(Array.isArray(file_accept) &&
+				file_accept.some((accept) => accept === "*" || accept === "file/*"))
+		) {
+			return true;
+		}
+		let acceptArray: string[];
+		if (typeof file_accept === "string") {
+			acceptArray = file_accept.split(",").map((s) => s.trim());
+		} else if (Array.isArray(file_accept)) {
+			acceptArray = file_accept;
+		} else {
+			return false;
+		}
+
+		return (
+			acceptArray.includes(uploaded_file_extension) ||
+			acceptArray.some((type) => {
+				const [category] = type.split("/").map((s) => s.trim());
+				return (
+					type.endsWith("/*") && uploaded_file_type.startsWith(category + "/")
+				);
+			})
+		);
+	}
+
 	export async function load_files(
 		files: File[] | Blob[]
 	): Promise<(FileData | null)[] | void> {
@@ -180,58 +210,8 @@
 		});
 	}
 
-	async function load_files_from_upload(e: Event): Promise<void> {
-		const target = e.target as HTMLInputElement;
-		if (!target.files) return;
-		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(
-		file_accept: string | string[] | null,
-		uploaded_file_extension: string,
-		uploaded_file_type: string
-	): boolean {
-		if (
-			!file_accept ||
-			file_accept === "*" ||
-			file_accept === "file/*" ||
-			(Array.isArray(file_accept) &&
-				file_accept.some((accept) => accept === "*" || accept === "file/*"))
-		) {
-			return true;
-		}
-		let acceptArray: string[];
-		if (typeof file_accept === "string") {
-			acceptArray = file_accept.split(",").map((s) => s.trim());
-		} else if (Array.isArray(file_accept)) {
-			acceptArray = file_accept;
-		} else {
-			return false;
-		}
-
-		return (
-			acceptArray.includes(uploaded_file_extension) ||
-			acceptArray.some((type) => {
-				const [category] = type.split("/").map((s) => s.trim());
-				return (
-					type.endsWith("/*") && uploaded_file_type.startsWith(category + "/")
-				);
-			})
-		);
-	}
-
-	async function loadFilesFromDrop(e: DragEvent): Promise<void> {
-		dragging = false;
-		if (!e.dataTransfer?.files) return;
-		const files_to_load = Array.from(e.dataTransfer.files).filter((file) => {
+	async function load_files_from_upload(files: File[]): Promise<void> {
+		const files_to_load = files.filter((file) => {
 			const file_extension = "." + file.name.split(".").pop();
 			if (
 				file_extension &&
@@ -302,32 +282,17 @@
 					: height
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
-		on:drag|preventDefault|stopPropagation
-		on:dragstart|preventDefault|stopPropagation
-		on:dragend|preventDefault|stopPropagation
-		on:dragover|preventDefault|stopPropagation
-		on:dragenter|preventDefault|stopPropagation
-		on:dragleave|preventDefault|stopPropagation
-		on:drop|preventDefault|stopPropagation
-		on:click={open_file_upload}
-		on:drop={loadFilesFromDrop}
-		on:dragenter={updateDragging}
-		on:dragleave={updateDragging}
+		use:drag={{
+			on_drag_change: (dragging) => (dragging = dragging),
+			on_files: (files) => load_files_from_upload(files),
+			accepted_types: accept_file_types,
+			mode: file_count,
+			disable_click
+		}}
 		aria-label={aria_label || "Click to upload or drop files"}
 		aria-dropeffect="copy"
 	>
 		<slot />
-		<input
-			aria-label="File upload"
-			data-testid="file-upload"
-			type="file"
-			bind:this={hidden_upload}
-			on:change={load_files_from_upload}
-			accept={accept_file_types || undefined}
-			multiple={file_count === "multiple" || undefined}
-			webkitdirectory={file_count === "directory" || undefined}
-			mozdirectory={file_count === "directory" || undefined}
-		/>
 	</button>
 {/if}
 
@@ -361,10 +326,6 @@
 		cursor: default;
 	}
 
-	input {
-		display: none;
-	}
-
 	.icon-mode {
 		position: absolute !important;
 		width: var(--size-4);

package/src/index.ts

@@ -1,2 +1,3 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
+export { create_drag } from "./utils";

package/src/utils.ts

@@ -0,0 +1,141 @@
+interface DragActionOptions {
+	disable_click?: boolean;
+	accepted_types?: string | string[] | null;
+	mode?: "single" | "multiple" | "directory";
+	on_drag_change?: (dragging: boolean) => void;
+	on_files?: (files: File[]) => void;
+}
+
+type ActionReturn = {
+	update: (new_options: DragActionOptions) => void;
+	destroy: () => void;
+};
+
+export function create_drag(): {
+	drag: (node: HTMLElement, options: DragActionOptions) => ActionReturn;
+	open_file_upload: () => void;
+} {
+	let hidden_input: HTMLInputElement;
+	let _options: DragActionOptions;
+	return {
+		drag(
+			node: HTMLElement,
+			options: DragActionOptions = {}
+		): {
+			update: (new_options: DragActionOptions) => void;
+			destroy: () => void;
+		} {
+			_options = options;
+
+			// Create and configure hidden file input
+			function setup_hidden_input(): void {
+				hidden_input = document.createElement("input");
+				hidden_input.type = "file";
+				hidden_input.style.display = "none";
+				hidden_input.setAttribute("aria-label", "File upload");
+				hidden_input.setAttribute("data-testid", "file-upload");
+				const accept_options = Array.isArray(_options.accepted_types)
+					? _options.accepted_types.join(",")
+					: _options.accepted_types || undefined;
+
+				if (accept_options) {
+					hidden_input.accept = accept_options;
+				}
+
+				hidden_input.multiple = _options.mode === "multiple" || false;
+				if (_options.mode === "directory") {
+					hidden_input.webkitdirectory = true;
+					hidden_input.setAttribute("directory", "");
+					hidden_input.setAttribute("mozdirectory", "");
+				}
+				node.appendChild(hidden_input);
+			}
+
+			setup_hidden_input();
+
+			function handle_drag(e: DragEvent): void {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+
+			function handle_drag_enter(e: DragEvent): void {
+				e.preventDefault();
+				e.stopPropagation();
+				_options.on_drag_change?.(true);
+			}
+
+			function handle_drag_leave(e: DragEvent): void {
+				e.preventDefault();
+				e.stopPropagation();
+				_options.on_drag_change?.(false);
+			}
+
+			function handle_drop(e: DragEvent): void {
+				e.preventDefault();
+				e.stopPropagation();
+				_options.on_drag_change?.(false);
+
+				if (!e.dataTransfer?.files) return;
+				const files = Array.from(e.dataTransfer.files);
+				if (files.length > 0) {
+					_options.on_files?.(files);
+				}
+			}
+
+			function handle_click(): void {
+				if (!_options.disable_click) {
+					hidden_input.value = "";
+					hidden_input.click();
+				}
+			}
+
+			function handle_file_input_change(): void {
+				if (hidden_input.files) {
+					const files = Array.from(hidden_input.files);
+					if (files.length > 0) {
+						_options.on_files?.(files);
+					}
+				}
+			}
+
+			// Add all event listeners
+			node.addEventListener("drag", handle_drag);
+			node.addEventListener("dragstart", handle_drag);
+			node.addEventListener("dragend", handle_drag);
+			node.addEventListener("dragover", handle_drag);
+			node.addEventListener("dragenter", handle_drag_enter);
+			node.addEventListener("dragleave", handle_drag_leave);
+			node.addEventListener("drop", handle_drop);
+			node.addEventListener("click", handle_click);
+			hidden_input!.addEventListener("change", handle_file_input_change);
+
+			return {
+				update(new_options: DragActionOptions) {
+					_options = new_options;
+					// Recreate hidden input with new options
+					hidden_input.remove();
+					setup_hidden_input();
+					hidden_input.addEventListener("change", handle_file_input_change);
+				},
+				destroy() {
+					node.removeEventListener("drag", handle_drag);
+					node.removeEventListener("dragstart", handle_drag);
+					node.removeEventListener("dragend", handle_drag);
+					node.removeEventListener("dragover", handle_drag);
+					node.removeEventListener("dragenter", handle_drag_enter);
+					node.removeEventListener("dragleave", handle_drag_leave);
+					node.removeEventListener("drop", handle_drop);
+					node.removeEventListener("click", handle_click);
+					hidden_input.removeEventListener("change", handle_file_input_change);
+					hidden_input.remove();
+				}
+			};
+		},
+		open_file_upload(): void {
+			if (hidden_input) {
+				hidden_input.value = "";
+				hidden_input.click();
+			}
+		}
+	};
+}