@gradio/upload 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gradio/upload
 
+## 0.4.0
+
+### Features
+
+- [#6356](https://github.com/gradio-app/gradio/pull/6356) [`854b482f5`](https://github.com/gradio-app/gradio/commit/854b482f598e0dc47673846631643c079576da9c) - Redesign file upload.  Thanks [@hannahblair](https://github.com/hannahblair)!
+- [#6307](https://github.com/gradio-app/gradio/pull/6307) [`f1409f95e`](https://github.com/gradio-app/gradio/commit/f1409f95ed39c5565bed6a601e41f94e30196a57) - Provide status updates on file uploads.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.3.3
 
 ### Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/upload",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "src/index.ts",
@@ -9,8 +9,8 @@
   "dependencies": {
     "@gradio/atoms": "^0.2.1",
     "@gradio/icons": "^0.2.0",
-    "@gradio/client": "^0.7.2",
-    "@gradio/upload": "^0.3.3",
+    "@gradio/client": "^0.8.0",
+    "@gradio/upload": "^0.4.0",
     "@gradio/utils": "^0.2.0"
   },
   "main_changeset": true,

package/src/Upload.svelte

@@ -3,6 +3,7 @@
 	import type { FileData } from "@gradio/client";
 	import { upload_files, upload, prepare_files } from "@gradio/client";
 	import { _ } from "svelte-i18n";
+	import UploadProgress from "./UploadProgress.svelte";
 
 	export let filetype: string | null = null;
 	export let dragging = false;
@@ -15,6 +16,10 @@
 	export let hidden = false;
 	export let include_sources = false;
 
+	let uploading = false;
+	let upload_id: string;
+	let file_data: FileData[];
+
 	// Needed for wasm support
 	const upload_fn = getContext<typeof upload_files>("upload_files");
 
@@ -36,8 +41,11 @@
 		file_data: FileData[]
 	): Promise<(FileData | null)[]> {
 		await tick();
-		const _file_data = await upload(file_data, root, upload_fn);
+		upload_id = Math.random().toString(36).substring(2, 15);
+		uploading = true;
+		const _file_data = await upload(file_data, root, upload_id, upload_fn);
 		dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
+		uploading = false;
 		return _file_data || [];
 	}
 
@@ -48,7 +56,7 @@
 			return;
 		}
 		let _files: File[] = files.map((f) => new File([f], f.name));
-		let file_data = await prepare_files(_files);
+		file_data = await prepare_files(_files);
 		return await handle_upload(file_data);
 	}
 
@@ -90,35 +98,39 @@
 	}
 </script>
 
-<button
-	class:hidden
-	class:center
-	class:boundedheight
-	class:flex
-	style:height={include_sources ? "calc(100% - 40px" : "100%"}
-	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
-		type="file"
-		bind:this={hidden_upload}
-		on:change={load_files_from_upload}
-		accept={filetype}
-		multiple={file_count === "multiple" || undefined}
-		webkitdirectory={file_count === "directory" || undefined}
-		mozdirectory={file_count === "directory" || undefined}
-	/>
-</button>
+{#if uploading}
+	<UploadProgress {root} {upload_id} files={file_data} />
+{:else}
+	<button
+		class:hidden
+		class:center
+		class:boundedheight
+		class:flex
+		style:height={include_sources ? "calc(100% - 40px" : "100%"}
+		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
+			type="file"
+			bind:this={hidden_upload}
+			on:change={load_files_from_upload}
+			accept={filetype}
+			multiple={file_count === "multiple" || undefined}
+			webkitdirectory={file_count === "directory" || undefined}
+			mozdirectory={file_count === "directory" || undefined}
+		/>
+	</button>
+{/if}
 
 <style>
 	button {

package/src/UploadProgress.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { FileData } from "@gradio/client";
+	import { onMount, createEventDispatcher } from "svelte";
+
+	type FileDataWithProgress = FileData & { progress: number };
+
+	export let upload_id: string;
+	export let root: string;
+	export let files: FileData[];
+
+	let event_source: EventSource;
+	let progress = false;
+	let current_file_upload: FileDataWithProgress;
+
+	let files_with_progress: FileDataWithProgress[] = files.map((file) => {
+		return {
+			...file,
+			progress: 0
+		};
+	});
+
+	const dispatch = createEventDispatcher();
+
+	function handleProgress(filename: string, chunk_size: number): void {
+		// Find the corresponding file in the array and update its progress
+		files_with_progress = files_with_progress.map((file) => {
+			if (file.orig_name === filename) {
+				file.progress += chunk_size;
+			}
+			return file;
+		});
+	}
+
+	function getProgress(file: FileDataWithProgress): number {
+		return (file.progress * 100) / (file.size || 0) || 0;
+	}
+
+	onMount(() => {
+		event_source = new EventSource(
+			`${root}/upload_progress?upload_id=${upload_id}`
+		);
+		// Event listener for progress updates
+		event_source.onmessage = async function (event) {
+			const _data = JSON.parse(event.data);
+			if (!progress) progress = true;
+			if (_data.msg === "done") {
+				event_source.close();
+				dispatch("done");
+			} else {
+				current_file_upload = _data;
+				handleProgress(_data.orig_name, _data.chunk_size);
+			}
+		};
+	});
+
+	function calculateTotalProgress(files: FileData[]): number {
+		let totalProgress = 0;
+		files.forEach((file) => {
+			totalProgress += getProgress(file as FileDataWithProgress);
+		});
+
+		document.documentElement.style.setProperty(
+			"--upload-progress-width",
+			(totalProgress / files.length).toFixed(2) + "%"
+		);
+
+		return totalProgress / files.length;
+	}
+
+	$: calculateTotalProgress(files_with_progress);
+</script>
+
+<div class="wrap" class:progress>
+	<span class="uploading"
+		>Uploading {files_with_progress.length}
+		{files_with_progress.length > 1 ? "files" : "file"}...</span
+	>
+
+	{#if current_file_upload}
+		<div class="file">
+			<span>
+				<div class="progress-bar">
+					<progress
+						style="visibility:hidden;height:0;width:0;"
+						value={getProgress(current_file_upload)}
+						max="100">{getProgress(current_file_upload)}</progress
+					>
+				</div>
+			</span>
+			<span class="file-name">
+				{current_file_upload.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);
+	}
+
+	.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>