@gradio/upload 0.3.0-beta.3 → 0.3.0-beta.6

package/CHANGELOG.md

@@ -1,38 +1,56 @@
 # @gradio/upload
 
-## 0.3.0-beta.3
+## 0.3.0-beta.6
 
-### Patch Changes
+### Features
+
+- [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.5
+
+### Features
+
+- [#6044](https://github.com/gradio-app/gradio/pull/6044) [`9053c95a1`](https://github.com/gradio-app/gradio/commit/9053c95a10de12aef572018ee37c71106d2da675) - Simplify File Component.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+### Fixes
 
-- Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
-  - @gradio/utils@0.2.0-beta.3
-  - @gradio/atoms@0.2.0-beta.3
-  - @gradio/upload@0.3.0-beta.3
+- [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests.  Thanks [@pngwn](https://github.com/pngwn)!
 
-## 0.3.0-beta.2
+## 0.3.0-beta.4
+
+### Features
+
+- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+## 0.3.3
 
 ### Patch Changes
 
-- Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
-  - @gradio/utils@0.2.0-beta.2
-  - @gradio/atoms@0.2.0-beta.2
-  - @gradio/upload@0.3.0-beta.2
+- Updated dependencies [[`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
+  - @gradio/atoms@0.2.0
 
-## 0.3.0-beta.1
+## 0.3.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @gradio/utils@0.2.0-beta.1
-  - @gradio/atoms@0.2.0-beta.1
-  - @gradio/upload@0.3.0-beta.1
+  - @gradio/atoms@0.1.4
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
+  - @gradio/icons@0.2.0
+  - @gradio/atoms@0.1.3
 
-## 0.3.0-beta.0
+## 0.3.0
 
 ### Features
 
-- [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
-- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`681f10c31`](https://github.com/gradio-app/gradio/commit/681f10c315a75cc8cd0473c9a0167961af7696db) - release first version. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
 
 ## 0.2.1
 
@@ -121,4 +139,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/README.md

@@ -0,0 +1,83 @@
+# `@gradio/upload`
+
+```html
+<script>
+    import { Upload, ModifyUpload, normalise_file, get_fetchable_url_or_file, upload, prepare_files } from "@gradio/upload";
+</script>
+```
+
+Upload
+```javascript
+	export let filetype: string | null = null;
+	export let dragging = false;
+	export let boundedheight = true;
+	export let center = true;
+	export let flex = true;
+	export let file_count = "single";
+	export let disable_click = false;
+	export let root: string;
+	export let hidden = false;
+```
+
+ModifyUpload
+```javascript
+    export let editable = false;
+	export let undoable = false;
+	export let absolute = true;
+	export let i18n: I18nFormatter;
+```
+
+```javascript
+export function normalise_file(
+	file: FileData | null,
+	server_url: string,
+	proxy_url: string | null
+): FileData | null;
+
+export function normalise_file(
+	file: FileData[] | null,
+	server_url: string,
+	proxy_url: string | null
+): FileData[] | null;
+
+export function normalise_file(
+	file: FileData[] | FileData | null,
+	server_url: string, // root: string,
+	proxy_url: string | null // root_url: string | null
+): FileData[] | FileData | null;
+
+export function normalise_file(
+	file: FileData[] | FileData | null,
+	server_url: string, // root: string,
+	proxy_url: string | null // root_url: string | null
+): FileData[] | FileData | null;
+
+export function get_fetchable_url_or_file(
+	path: string | null,
+	server_url: string,
+	proxy_url: string | null
+): string
+
+export async function upload(
+	file_data: FileData[],
+	root: string,
+	upload_fn: typeof upload_files = upload_files
+): Promise<(FileData | null)[] | null>
+
+export async function prepare_files(
+	files: File[],
+	is_stream?: boolean
+): Promise<FileData[]> {
+	return files.map(
+		(f, i) =>
+			new FileData({
+				path: f.name,
+				orig_name: f.name,
+				blob: f,
+				size: f.size,
+				mime_type: f.type,
+				is_stream
+			})
+	);
+}
+```

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@gradio/upload",
-  "version": "0.3.0-beta.3",
+  "version": "0.3.0-beta.6",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.2.0-beta.3",
-    "@gradio/icons": "^0.2.0-beta.0",
-    "@gradio/client": "^0.3.1",
-    "@gradio/upload": "^0.3.0-beta.3",
-    "@gradio/utils": "^0.2.0-beta.3"
+    "@gradio/atoms": "^0.2.0-beta.6",
+    "@gradio/icons": "^0.2.0-beta.3",
+    "@gradio/client": "^0.7.0-beta.1",
+    "@gradio/upload": "^0.3.0-beta.6",
+    "@gradio/utils": "^0.2.0-beta.6"
   },
-  "main_changeset": true
+  "main_changeset": true,
+  "exports": {
+    ".": "./src/index.ts"
+  }
 }

package/src/ModifyUpload.svelte

@@ -11,9 +11,9 @@
 	export let i18n: I18nFormatter;
 
 	const dispatch = createEventDispatcher<{
-		edit: never;
-		clear: never;
-		undo: never;
+		edit?: never;
+		clear?: never;
+		undo?: never;
 	}>();
 </script>
 

package/src/Upload.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, getContext } from "svelte";
-	import type { FileData } from "./types";
-	import { blobToBase64, normalise_file } from "./utils";
-	import { upload_files as default_upload_files } from "@gradio/client";
-
-	const upload_files =
-		getContext<typeof default_upload_files>("upload_files") ??
-		default_upload_files;
+	import type { FileData } from "@gradio/client";
+	import { upload_files, upload, prepare_files } from "@gradio/client";
+	import { _ } from "svelte-i18n";
 
 	export let filetype: string | null = null;
 	export let dragging = false;
@@ -16,6 +12,10 @@
 	export let file_count = "single";
 	export let disable_click = false;
 	export let root: string;
+	export let hidden = false;
+
+	// Needed for wasm support
+	const upload_fn = getContext<typeof upload_files>("upload_files");
 
 	let hidden_upload: HTMLInputElement;
 
@@ -25,79 +25,74 @@
 		dragging = !dragging;
 	}
 
-	function openFileUpload(): void {
+	export function open_file_upload(): void {
 		if (disable_click) return;
 		hidden_upload.value = "";
 		hidden_upload.click();
 	}
 
-	async function handle_upload(file_data: FileData[]): Promise<void> {
+	async function handle_upload(
+		file_data: FileData[]
+	): Promise<(FileData | null)[]> {
 		await tick();
-		let files = (Array.isArray(file_data) ? file_data : [file_data]).map(
-			(file_data) => file_data.blob!
-		);
-
-		await upload_files(root, files).then(async (response) => {
-			if (response.error) {
-				(Array.isArray(file_data) ? file_data : [file_data]).forEach(
-					async (file_data, i) => {
-						file_data.data = await blobToBase64(file_data.blob!);
-						file_data.blob = undefined;
-					}
-				);
-			} else {
-				(Array.isArray(file_data) ? file_data : [file_data]).forEach((f, i) => {
-					if (response.files) {
-						f.orig_name = f.name;
-						f.name = response.files[i];
-						f.is_file = true;
-						f.blob = undefined;
-						normalise_file(f, root, null);
-					}
-				});
-			}
-		});
-		dispatch("load", file_count === "single" ? file_data[0] : file_data);
+		const _file_data = await upload(file_data, root, upload_fn);
+		dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
+		return _file_data || [];
 	}
 
-	async function loadFiles(files: FileList): Promise<void> {
-		let _files: File[] = Array.from(files);
+	export async function load_files(
+		files: File[] | Blob[]
+	): Promise<(FileData | null)[] | void> {
 		if (!files.length) {
 			return;
 		}
-		if (file_count === "single") {
-			_files = [files[0]];
-		}
-		var all_file_data: FileData[] = [];
-		_files.forEach((f, i) => {
-			all_file_data[i] = {
-				name: f.name,
-				size: f.size,
-				data: "",
-				blob: f
-			};
-		});
-		await handle_upload(all_file_data);
+
+		let _files: File[] = files.map((f) => new File([f], f.name));
+
+		let file_data = await prepare_files(_files);
+		return await handle_upload(file_data);
 	}
 
-	async function loadFilesFromUpload(e: Event): Promise<void> {
+	async function load_files_from_upload(e: Event): Promise<void> {
 		const target = e.target as HTMLInputElement;
-
 		if (!target.files) return;
-		await loadFiles(target.files);
+		await load_files(Array.from(target.files));
+	}
+
+	function is_valid_mimetype(
+		file_accept: string | null,
+		mime_type: string
+	): boolean {
+		if (!file_accept) {
+			return true;
+		}
+		if (file_accept === "*") {
+			return true;
+		}
+		if (file_accept.endsWith("/*")) {
+			return mime_type.startsWith(file_accept.slice(0, -1));
+		}
+		return file_accept === mime_type;
 	}
 
 	async function loadFilesFromDrop(e: DragEvent): Promise<void> {
 		dragging = false;
 		if (!e.dataTransfer?.files) return;
-		await loadFiles(e.dataTransfer.files);
+
+		const files_to_load = Array.from(e.dataTransfer.files).filter((f) => {
+			if (is_valid_mimetype(filetype, f.type)) {
+				return true;
+			}
+			dispatch("error", `Invalid file type only ${filetype} allowed.`);
+			return false;
+		});
+
+		await load_files(files_to_load);
 	}
 </script>
 
-<!-- TODO: fix -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
+<button
+	class:hidden
 	class:center
 	class:boundedheight
 	class:flex
@@ -108,7 +103,7 @@
 	on:dragenter|preventDefault|stopPropagation
 	on:dragleave|preventDefault|stopPropagation
 	on:drop|preventDefault|stopPropagation
-	on:click={openFileUpload}
+	on:click={open_file_upload}
 	on:drop={loadFilesFromDrop}
 	on:dragenter={updateDragging}
 	on:dragleave={updateDragging}
@@ -117,23 +112,30 @@
 	<input
 		type="file"
 		bind:this={hidden_upload}
-		on:change={loadFilesFromUpload}
+		on:change={load_files_from_upload}
 		accept={filetype}
 		multiple={file_count === "multiple" || undefined}
 		webkitdirectory={file_count === "directory" || undefined}
 		mozdirectory={file_count === "directory" || undefined}
 	/>
-</div>
+</button>
 
 <style>
-	div {
+	button {
 		cursor: pointer;
 		width: var(--size-full);
 		height: var(--size-full);
 	}
 
+	.hidden {
+		display: none;
+		height: 0;
+		position: absolute;
+	}
+
 	.center {
-		text-align: center;
+		display: flex;
+		justify-content: center;
 	}
 	.flex {
 		display: flex;

package/src/index.ts

@@ -1,8 +1,2 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
-export type { FileData } from "./types";
-export {
-	normalise_file,
-	get_fetchable_url_or_file,
-	blobToBase64
-} from "./utils";

package/src/types.ts

@@ -1,11 +0,0 @@
-export interface FileData {
-	name: string;
-	orig_name?: string;
-	size?: number;
-	data: string;
-	blob?: File;
-	is_file?: boolean;
-	is_stream?: boolean;
-	mime_type?: string;
-	alt_text?: string;
-}

package/src/utils.ts

@@ -1,87 +0,0 @@
-import type { FileData } from "./types";
-
-export function normalise_file(
-	file: string | FileData | null,
-	root: string,
-	root_url: string | null
-): FileData | null;
-
-export function normalise_file(
-	file: FileData[] | null,
-	root: string,
-	root_url: string | null
-): FileData[] | null;
-
-export function normalise_file(
-	file: FileData[] | FileData | null,
-	root: string,
-	root_url: string | null
-): FileData[] | FileData | null;
-
-export function normalise_file(
-	file: FileData[] | FileData | string | null,
-	root: string,
-	root_url: string | null
-): FileData[] | FileData | null {
-	if (file == null) return null;
-	if (typeof file === "string") {
-		return {
-			name: "file_data",
-			data: file
-		};
-	} else if (Array.isArray(file)) {
-		const normalized_file: (FileData | null)[] = [];
-
-		for (const x of file) {
-			if (x === null) {
-				normalized_file.push(null);
-			} else {
-				normalized_file.push(normalise_file(x, root, root_url));
-			}
-		}
-
-		return normalized_file as FileData[];
-	} else if (file.is_file) {
-		file.data = get_fetchable_url_or_file(file.name, root, root_url);
-	} else if (file.is_stream) {
-		if (root_url == null) {
-			file.data = root + "/stream/" + file.name;
-		} else {
-			file.data = "/proxy=" + root_url + "stream/" + file.name;
-		}
-	}
-	return file;
-}
-
-function is_url(str: string): boolean {
-	try {
-		const url = new URL(str);
-		return url.protocol === "http:" || url.protocol === "https:";
-	} catch {
-		return false;
-	}
-}
-
-export function get_fetchable_url_or_file(
-	path: string | null,
-	root: string,
-	root_url: string | null
-): string {
-	if (path == null) {
-		return root_url ? `/proxy=${root_url}file=` : `${root}/file=`;
-	}
-	if (is_url(path)) {
-		return path;
-	}
-	return root_url ? `/proxy=${root_url}file=${path}` : `${root}/file=${path}`;
-}
-
-export const blobToBase64 = (blob: File): Promise<string> => {
-	const reader = new FileReader();
-	reader.readAsDataURL(blob);
-	return new Promise((resolve) => {
-		reader.onloadend = (): void => {
-			resolve(reader.result as string);
-		};
-	});
-};