@gradio/upload 0.12.2 → 0.12.4-beta.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @gradio/upload
 
+## 0.12.4-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.12.4-beta.0
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/wasm@0.13.1-beta.0
+
+## 0.12.3
+
+### Features
+
+- [#9031](https://github.com/gradio-app/gradio/pull/9031) [`04b7d32`](https://github.com/gradio-app/gradio/commit/04b7d327ec1227a693fc2dfea51b1e2729851bde) - Allow drag and replace image in `gr.Image` and Multimodal textbox.  Thanks @hannahblair!
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/wasm@0.13.0
+- @gradio/icons@0.7.1
+
 ## 0.12.2
 
 ### Dependency updates

package/dist/src/ModifyUpload.svelte

@@ -0,0 +1,62 @@
+<script>import { IconButton } from "@gradio/atoms";
+import { Edit, Clear, Undo, Download } from "@gradio/icons";
+import { DownloadLink } from "@gradio/wasm/svelte";
+import { createEventDispatcher } from "svelte";
+export let editable = false;
+export let undoable = false;
+export let download = null;
+export let absolute = true;
+export let i18n;
+const dispatch = createEventDispatcher();
+</script>
+
+<div
+	class:not-absolute={!absolute}
+	style:position={absolute ? "absolute" : "static"}
+>
+	{#if editable}
+		<IconButton
+			Icon={Edit}
+			label={i18n("common.edit")}
+			on:click={() => dispatch("edit")}
+		/>
+	{/if}
+
+	{#if undoable}
+		<IconButton
+			Icon={Undo}
+			label={i18n("common.undo")}
+			on:click={() => dispatch("undo")}
+		/>
+	{/if}
+
+	{#if download}
+		<DownloadLink href={download} download>
+			<IconButton Icon={Download} label={i18n("common.download")} />
+		</DownloadLink>
+	{/if}
+
+	<IconButton
+		Icon={Clear}
+		label={i18n("common.clear")}
+		on:click={(event) => {
+			dispatch("clear");
+			event.stopPropagation();
+		}}
+	/>
+</div>
+
+<style>
+	div {
+		display: flex;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-1);
+	}
+
+	.not-absolute {
+		margin: var(--size-1);
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        editable?: boolean | undefined;
+        undoable?: boolean | undefined;
+        download?: (string | null) | undefined;
+        absolute?: boolean | undefined;
+        i18n: I18nFormatter;
+    };
+    events: {
+        edit?: CustomEvent<undefined> | undefined;
+        clear?: CustomEvent<undefined> | undefined;
+        undo?: CustomEvent<undefined> | undefined;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModifyUploadProps = typeof __propDef.props;
+export type ModifyUploadEvents = typeof __propDef.events;
+export type ModifyUploadSlots = typeof __propDef.slots;
+export default class ModifyUpload extends SvelteComponent<ModifyUploadProps, ModifyUploadEvents, ModifyUploadSlots> {
+}
+export {};

package/dist/src/Upload.svelte

@@ -0,0 +1,298 @@
+<script>import { createEventDispatcher, tick, getContext } from "svelte";
+import { prepare_files } from "@gradio/client";
+import { _ } from "svelte-i18n";
+import UploadProgress from "./UploadProgress.svelte";
+export let filetype = 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;
+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;
+export let stream_handler;
+let upload_id;
+let file_data;
+let accept_file_types;
+let use_post_upload_validation = null;
+const get_ios = () => {
+  if (typeof navigator !== "undefined") {
+    const userAgent = navigator.userAgent.toLowerCase();
+    return userAgent.indexOf("iphone") > -1 || userAgent.indexOf("ipad") > -1;
+  }
+  return false;
+};
+$:
+  ios = get_ios();
+const dispatch = createEventDispatcher();
+const validFileTypes = ["image", "video", "audio", "text", "file"];
+const process_file_type = (type) => {
+  if (ios && type.startsWith(".")) {
+    use_post_upload_validation = true;
+    return type;
+  }
+  if (ios && type.includes("file/*")) {
+    return "*";
+  }
+  if (type.startsWith(".") || type.endsWith("/*")) {
+    return type;
+  }
+  if (validFileTypes.includes(type)) {
+    return type + "/*";
+  }
+  return "." + type;
+};
+$:
+  if (filetype == null) {
+    accept_file_types = null;
+  } else if (typeof filetype === "string") {
+    accept_file_types = process_file_type(filetype);
+  } else if (ios && filetype.includes("file/*")) {
+    accept_file_types = "*";
+  } else {
+    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++) {
+      const type = items[i].types.find((t) => t.startsWith("image/"));
+      if (type) {
+        items[i].getType(type).then(async (blob) => {
+          const file = new File(
+            [blob],
+            `clipboard.${type.replace("image/", "")}`
+          );
+          await load_files([file]);
+        });
+        break;
+      }
+    }
+  });
+}
+export function open_file_upload() {
+  if (disable_click)
+    return;
+  if (hidden_upload) {
+    hidden_upload.value = "";
+    hidden_upload.click();
+  }
+}
+async function handle_upload(file_data2) {
+  await tick();
+  upload_id = Math.random().toString(36).substring(2, 15);
+  uploading = true;
+  try {
+    const _file_data = await upload(
+      file_data2,
+      root,
+      upload_id,
+      max_file_size ?? Infinity
+    );
+    dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
+    uploading = false;
+    return _file_data || [];
+  } catch (e) {
+    dispatch("error", e.message);
+    uploading = false;
+    return [];
+  }
+}
+export async function load_files(files) {
+  if (!files.length) {
+    return;
+  }
+  let _files = files.map(
+    (f) => new File([f], f instanceof File ? f.name : "file", { type: f.type })
+  );
+  if (ios && use_post_upload_validation) {
+    _files = _files.filter((file) => {
+      if (is_valid_file(file)) {
+        return true;
+      }
+      dispatch(
+        "error",
+        `Invalid file type: ${file.name}. Only ${filetype} allowed.`
+      );
+      return false;
+    });
+    if (_files.length === 0) {
+      return [];
+    }
+  }
+  file_data = await prepare_files(_files);
+  return await handle_upload(file_data);
+}
+function is_valid_file(file) {
+  if (!filetype)
+    return true;
+  const allowed_types = Array.isArray(filetype) ? filetype : [filetype];
+  return allowed_types.some((type) => {
+    const processed_type = process_file_type(type);
+    if (processed_type.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(processed_type.toLowerCase());
+    }
+    if (processed_type === "*") {
+      return true;
+    }
+    if (processed_type.endsWith("/*")) {
+      const [category] = processed_type.split("/");
+      return file.type.startsWith(category + "/");
+    }
+    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) => {
+    const file_extension = "." + file.name.split(".").pop();
+    if (file_extension && is_valid_mimetype(accept_file_types, file_extension, file.type)) {
+      return true;
+    }
+    if (file_extension && Array.isArray(filetype) ? filetype.includes(file_extension) : file_extension === filetype) {
+      return true;
+    }
+    dispatch("error", `Invalid file type only ${filetype} allowed.`);
+    return false;
+  });
+  if (format != "blob") {
+    await load_files(files_to_load);
+  } else {
+    if (file_count === "single") {
+      dispatch("load", files_to_load[0]);
+      return;
+    }
+    dispatch("load", files_to_load);
+  }
+}
+</script>
+
+{#if filetype === "clipboard"}
+	<button
+		class:hidden
+		class:center
+		class:boundedheight
+		class:flex
+		style:height="100%"
+		tabindex={hidden ? -1 : 0}
+		on:click={paste_clipboard}
+	>
+		<slot />
+	</button>
+{:else if uploading && show_progress}
+	{#if !hidden}
+		<UploadProgress {root} {upload_id} files={file_data} {stream_handler} />
+	{/if}
+{:else}
+	<button
+		class:hidden
+		class:center
+		class:boundedheight
+		class:flex
+		class:disable_click
+		style: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}
+	>
+		<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}
+
+<style>
+	button {
+		cursor: pointer;
+		width: var(--size-full);
+	}
+
+	.hidden {
+		display: none;
+		position: absolute;
+		flex-grow: 0;
+	}
+
+	.hidden :global(svg) {
+		display: none;
+	}
+
+	.center {
+		display: flex;
+		justify-content: center;
+	}
+	.flex {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.disable_click {
+		cursor: default;
+	}
+
+	input {
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,51 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+import { type Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        filetype?: (string | string[] | null) | undefined;
+        dragging?: boolean | undefined;
+        boundedheight?: boolean | undefined;
+        center?: boolean | undefined;
+        flex?: boolean | undefined;
+        file_count?: ("single" | "multiple" | "directory") | undefined;
+        disable_click?: boolean | undefined;
+        root: string;
+        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"];
+        stream_handler: Client["stream"];
+        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>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 paste_clipboard(): () => void;
+    get open_file_upload(): () => void;
+    get load_files(): (files: File[] | Blob[]) => Promise<(FileData | null)[] | void>;
+}
+export {};

package/dist/src/UploadProgress.svelte

@@ -0,0 +1,172 @@
+<script>import { FileData } from "@gradio/client";
+import { onMount, createEventDispatcher, onDestroy } from "svelte";
+export let upload_id;
+export let root;
+export let files;
+export let stream_handler;
+let stream;
+let progress = false;
+let current_file_upload;
+let file_to_display;
+let files_with_progress = files.map((file) => {
+  return {
+    ...file,
+    progress: 0
+  };
+});
+const dispatch = createEventDispatcher();
+function handleProgress(filename, chunk_size) {
+  files_with_progress = files_with_progress.map((file) => {
+    if (file.orig_name === filename) {
+      file.progress += chunk_size;
+    }
+    return file;
+  });
+}
+function getProgress(file) {
+  return file.progress * 100 / (file.size || 0) || 0;
+}
+onMount(async () => {
+  stream = await stream_handler(
+    new URL(`${root}/upload_progress?upload_id=${upload_id}`)
+  );
+  if (stream == null) {
+    throw new Error("Event source is not defined");
+  }
+  stream.onmessage = async function(event) {
+    const _data = JSON.parse(event.data);
+    if (!progress)
+      progress = true;
+    if (_data.msg === "done") {
+      stream?.close();
+      dispatch("done");
+    } else {
+      current_file_upload = _data;
+      handleProgress(_data.orig_name, _data.chunk_size);
+    }
+  };
+});
+onDestroy(() => {
+  if (stream != null || stream != void 0)
+    stream.close();
+});
+function calculateTotalProgress(files2) {
+  let totalProgress = 0;
+  files2.forEach((file) => {
+    totalProgress += getProgress(file);
+  });
+  document.documentElement.style.setProperty(
+    "--upload-progress-width",
+    (totalProgress / files2.length).toFixed(2) + "%"
+  );
+  return totalProgress / files2.length;
+}
+$:
+  calculateTotalProgress(files_with_progress);
+$:
+  file_to_display = current_file_upload || files_with_progress[0];
+</script>
+
+<div class="wrap" class:progress>
+	<span class="uploading"
+		>Uploading {files_with_progress.length}
+		{files_with_progress.length > 1 ? "files" : "file"}...</span
+	>
+
+	{#if file_to_display}
+		<div class="file">
+			<span>
+				<div class="progress-bar">
+					<progress
+						style="visibility:hidden;height:0;width:0;"
+						value={getProgress(file_to_display)}
+						max="100">{getProgress(file_to_display)}</progress
+					>
+				</div>
+			</span>
+			<span class="file-name">
+				{file_to_display.orig_name}
+			</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		overflow-y: auto;
+		transition: opacity 0.5s ease-in-out;
+		background: var(--block-background-fill);
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--size-40);
+		width: var(--size-full);
+	}
+
+	.wrap::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: var(--upload-progress-width);
+		height: 100%;
+		transition: all 0.5s ease-in-out;
+		z-index: 1;
+	}
+
+	.uploading {
+		font-size: var(--text-lg);
+		font-family: var(--font);
+		z-index: 2;
+	}
+
+	.file-name {
+		margin: var(--spacing-md);
+		font-size: var(--text-lg);
+		color: var(--body-text-color-subdued);
+	}
+
+	.file {
+		font-size: var(--text-md);
+		z-index: 2;
+		display: flex;
+		align-items: center;
+	}
+
+	.file progress {
+		display: inline;
+		height: var(--size-1);
+		width: 100%;
+		transition: all 0.5s ease-in-out;
+		color: var(--color-accent);
+		border: none;
+	}
+
+	.file progress[value]::-webkit-progress-value {
+		background-color: var(--color-accent);
+		border-radius: 20px;
+	}
+
+	.file progress[value]::-webkit-progress-bar {
+		background-color: var(--border-color-accent);
+		border-radius: 20px;
+	}
+
+	.progress-bar {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: radial-gradient(
+				closest-side,
+				var(--block-background-fill) 64%,
+				transparent 53% 100%
+			),
+			conic-gradient(
+				var(--color-accent) var(--upload-progress-width),
+				var(--border-color-accent) 0
+			);
+		transition: all 0.5s ease-in-out;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { FileData, type Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        upload_id: string;
+        root: string;
+        files: FileData[];
+        stream_handler: Client["stream"];
+    };
+    events: {
+        done: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UploadProgressProps = typeof __propDef.props;
+export type UploadProgressEvents = typeof __propDef.events;
+export type UploadProgressSlots = typeof __propDef.slots;
+export default class UploadProgress extends SvelteComponent<UploadProgressProps, UploadProgressEvents, UploadProgressSlots> {
+}
+export {};

package/dist/src/index.d.ts

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

package/dist/src/index.js

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

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "@gradio/upload",
-  "version": "0.12.2",
+  "version": "0.12.4-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@gradio/atoms": "^0.7.9",
-    "@gradio/client": "^1.5.0",
-    "@gradio/icons": "^0.7.0",
-    "@gradio/wasm": "^0.12.0",
-    "@gradio/utils": "^0.5.2"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/icons": "^0.8.0-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1",
+    "@gradio/client": "^1.6.0-beta.1",
+    "@gradio/wasm": "^0.13.1-beta.1"
   },
   "main_changeset": true,
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "gradio": "./src/index.ts",
+      "svelte": "./dist/src/index.js",
+      "types": "./dist/src/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/upload"
   }
 }

package/src/Upload.svelte

@@ -319,12 +319,14 @@
 
 	.hidden {
 		display: none;
-		height: 0 !important;
 		position: absolute;
-		width: 0;
 		flex-grow: 0;
 	}
 
+	.hidden :global(svg) {
+		display: none;
+	}
+
 	.center {
 		display: flex;
 		justify-content: center;