@gradio/file 0.4.8 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/file
 
+## 0.5.0
+
+### Features
+
+- [#7299](https://github.com/gradio-app/gradio/pull/7299) [`f35f615`](https://github.com/gradio-app/gradio/commit/f35f615e33a5dd90bfeb106b6f5dca689849fcef) - Added remove button for every file in file preview, to remove individual file in gr.File().  Thanks [@shubhamofbce](https://github.com/shubhamofbce)!
+- [#7183](https://github.com/gradio-app/gradio/pull/7183) [`49d9c48`](https://github.com/gradio-app/gradio/commit/49d9c48537aa706bf72628e3640389470138bdc6) - [WIP] Refactor file normalization to be in the backend and remove it from the frontend of each component.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.4.9
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components.  Thanks [@abidlabs](https://github.com/abidlabs)!
+- [#7221](https://github.com/gradio-app/gradio/pull/7221) [`cae05c0`](https://github.com/gradio-app/gradio/commit/cae05c05ecde56c4d92c6b5ed8d13353505cbd14) - Fix single file upload display.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.4.8
 
 ### Patch Changes
@@ -331,4 +345,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 - Updated dependencies []:
   - @gradio/utils@0.0.2
   - @gradio/atoms@0.0.2
-  - @gradio/upload@0.0.2
+  - @gradio/upload@0.0.2

package/Example.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
 
-	export let value: FileData;
+	export let value: FileData | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -11,7 +11,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{Array.isArray(value) ? value.join(", ") : value}
+	{value ? (Array.isArray(value) ? value.join(", ") : value) : ""}
 </div>
 
 <style>

package/FileUpload.stories.svelte

@@ -0,0 +1,64 @@
+<script context="module">
+	import { Template, Story } from "@storybook/addon-svelte-csf";
+	import { format } from "svelte-i18n";
+	import FileUpload from "./shared/FileUpload.svelte";
+	import { get } from "svelte/store";
+
+	export const meta = {
+		title: "Components/FileUpload",
+		component: FileUpload,
+		argTypes: {
+			value: {
+				control: "text",
+				description: "The URL or filepath (or list of URLs or filepaths)",
+				name: "value",
+				value: []
+			},
+			file_count: {
+				control: "radio",
+				options: ["single", "multiple"],
+				description: "Whether to allow single or multiple files to be uploaded",
+				name: "file_count",
+				value: "single"
+			}
+		}
+	};
+</script>
+
+<Template let:args>
+	<FileUpload {...args} i18n={get(format)} />
+</Template>
+
+<Story
+	name="Single File"
+	args={{
+		value: [
+			{
+				path: "cheetah.jpg",
+				orig_name: "cheetah.jpg",
+				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				size: 10000
+			}
+		],
+		file_count: "single"
+	}}
+/>
+<Story
+	name="Multiple files"
+	args={{
+		value: Array(2).fill({
+			path: "cheetah.jpg",
+			orig_name: "cheetah.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			size: 10000
+		}),
+		file_count: "multiple"
+	}}
+/>
+<Story
+	name="No value"
+	args={{
+		value: null,
+		file_count: "multiple"
+	}}
+/>

package/Index.svelte

@@ -11,7 +11,7 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import File from "./shared/File.svelte";
 	import FileUpload from "./shared/FileUpload.svelte";
-	import { normalise_file, type FileData } from "@gradio/client";
+	import type { FileData } from "@gradio/client";
 	import { Block, UploadText } from "@gradio/atoms";
 
 	import { StatusTracker } from "@gradio/statustracker";
@@ -28,7 +28,6 @@
 	export let show_label: boolean;
 	export let height: number | undefined = undefined;
 
-	export let proxy_url: null | string;
 	export let _selectable = false;
 	export let loading_status: LoadingStatus;
 	export let container = true;
@@ -43,12 +42,11 @@
 	}>;
 	export let file_count: string;
 	export let file_types: string[] = ["file"];
-	$: _value = normalise_file(value, root, proxy_url);
 
-	let old_value = _value;
-	$: if (JSON.stringify(old_value) !== JSON.stringify(_value)) {
+	let old_value = value;
+	$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
 		gradio.dispatch("change");
-		old_value = _value;
+		old_value = value;
 	}
 
 	let dragging = false;
@@ -79,7 +77,7 @@
 		<File
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			selectable={_selectable}
-			value={_value}
+			{value}
 			{label}
 			{show_label}
 			{height}
@@ -89,7 +87,7 @@
 		<FileUpload
 			{label}
 			{show_label}
-			value={_value}
+			{value}
 			{file_count}
 			{file_types}
 			selectable={_selectable}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@gradio/file",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.5.0",
-    "@gradio/client": "^0.10.1",
     "@gradio/icons": "^0.3.2",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/wasm": "^0.5.1",
-    "@gradio/upload": "^0.7.0",
-    "@gradio/utils": "^0.2.1"
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/client": "^0.12.0",
+    "@gradio/upload": "^0.7.2",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/wasm": "^0.6.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,

package/shared/FilePreview.svelte

@@ -7,6 +7,7 @@
 
 	const dispatch = createEventDispatcher<{
 		select: SelectData;
+		change: FileData[] | FileData;
 	}>();
 	export let value: FileData | FileData[];
 	export let selectable = false;
@@ -29,6 +30,13 @@
 			filename_ext
 		};
 	});
+
+	function remove_file(index: number): void {
+		normalized_files.splice(index, 1);
+		normalized_files = [...normalized_files];
+		value = normalized_files;
+		dispatch("change", normalized_files);
+	}
 </script>
 
 <div
@@ -66,6 +74,21 @@
 							{i18n("file.uploading")}
 						{/if}
 					</td>
+					{#if normalized_files.length > 1}
+						<td>
+							<button
+								class="label-clear-button"
+								aria-label="Remove this file"
+								on:click={() => remove_file(i)}
+								on:keydown={(event) => {
+									if (event.key === "Enter") {
+										remove_file(i);
+									}
+								}}
+								>×
+							</button>
+						</td>
+					{/if}
 				</tr>
 			{/each}
 		</tbody>
@@ -73,6 +96,16 @@
 </div>
 
 <style>
+	.label-clear-button {
+		color: var(--body-text-color-subdued);
+		position: relative;
+		left: -3px;
+	}
+
+	.label-clear-button:hover {
+		color: var(--body-text-color);
+	}
+
 	.file-preview {
 		table-layout: fixed;
 		width: var(--size-full);

package/shared/FileUpload.svelte

@@ -67,9 +67,9 @@
 	label={label || "File"}
 />
 
-{#if value && (Array.isArray(value) ? value.length > 0 : false)}
+{#if value && (Array.isArray(value) ? value.length > 0 : true)}
 	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
-	<FilePreview {i18n} on:select {selectable} {value} {height} />
+	<FilePreview {i18n} on:select {selectable} {value} {height} on:change />
 {:else}
 	<Upload
 		on:load={handle_upload}