@gradio/file 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/file
 
+## 0.12.0
+
+### Features
+
+- [#10210](https://github.com/gradio-app/gradio/pull/10210) [`13a83e5`](https://github.com/gradio-app/gradio/commit/13a83e5001e29594990d61569887cb8562744964) - Allow reordering files in gr.File.  Thanks @hannahblair!
+
+### Fixes
+
+- [#10209](https://github.com/gradio-app/gradio/pull/10209) [`2700d18`](https://github.com/gradio-app/gradio/commit/2700d1898bc8eeb3fd9f65ce77be17c2614a388f) - Ensure the `height` param in `gr.File` works as expected.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.13.0
+- @gradio/utils@0.10.0
+- @gradio/upload@0.14.4
+- @gradio/client@1.9.0
+- @gradio/icons@0.9.0
+- @gradio/statustracker@0.10.0
+- @gradio/wasm@0.16.0
+
 ## 0.11.3
 
 ### Dependency updates

package/File.stories.svelte

@@ -1,11 +1,11 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import FilePreview from "./shared/FilePreview.svelte";
+	import File from "./Index.svelte";
 </script>
 
 <Meta
 	title="Components/File"
-	component={FilePreview}
+	component={File}
 	argTypes={{
 		value: {
 			control: "text",
@@ -17,7 +17,7 @@
 />
 
 <Template let:args>
-	<FilePreview {...args} />
+	<File {...args} />
 </Template>
 
 <Story
@@ -34,14 +34,31 @@
 	}}
 />
 <Story
-	name="Multiple files, with height set to 150px"
+	name="Multiple files, with height set to 150px and reordering enabled"
 	args={{
-		value: Array(10).fill({
-			path: "cheetah.jpg",
-			orig_name: "cheetah.jpg",
-			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
-			size: 10000
-		}),
-		height: 150
+		value: [
+			{
+				path: "cheetah.jpg",
+				orig_name: "cheetah.jpgz",
+				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+				size: 10000
+			},
+			{
+				path: "cheetah.jpgs",
+				orig_name: "cheetah.jpg",
+				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				size: 10000
+			}
+		],
+		height: 150,
+		allow_reordering: true
+	}}
+/>
+<Story
+	name="File upload with height set to 400px"
+	args={{
+		interactive: true,
+		value: null,
+		height: 400
 	}}
 />

package/Index.svelte

@@ -46,6 +46,7 @@
 	export let file_count: "single" | "multiple" | "directory";
 	export let file_types: string[] = ["file"];
 	export let input_ready: boolean;
+	export let allow_reordering = false;
 	let uploading = false;
 	$: input_ready = !uploading;
 
@@ -103,6 +104,7 @@
 			selectable={_selectable}
 			{root}
 			{height}
+			{allow_reordering}
 			bind:uploading
 			max_file_size={gradio.max_file_size}
 			on:change={({ detail }) => {

package/dist/Index.svelte

@@ -28,6 +28,7 @@ export let gradio;
 export let file_count;
 export let file_types = ["file"];
 export let input_ready;
+export let allow_reordering = false;
 let uploading = false;
 $:
   input_ready = !uploading;
@@ -85,6 +86,7 @@ let pending_upload = false;
 			selectable={_selectable}
 			{root}
 			{height}
+			{allow_reordering}
 			bind:uploading
 			max_file_size={gradio.max_file_size}
 			on:change={({ detail }) => {

package/dist/Index.svelte.d.ts

@@ -35,6 +35,7 @@ declare const __propDef: {
         file_count: "single" | "multiple" | "directory";
         file_types?: string[] | undefined;
         input_ready: boolean;
+        allow_reordering?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -117,4 +118,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get input_ready(): boolean;
     /**accessor*/
     set input_ready(_: boolean);
+    get allow_reordering(): boolean | undefined;
+    /**accessor*/
+    set allow_reordering(_: boolean | undefined);
 }

package/dist/shared/FilePreview.svelte

@@ -6,6 +6,51 @@ export let value;
 export let selectable = false;
 export let height = void 0;
 export let i18n;
+export let allow_reordering = false;
+let dragging_index = null;
+let drop_target_index = null;
+function handle_drag_start(event, index) {
+  dragging_index = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", index.toString());
+  }
+}
+function handle_drag_over(event, index) {
+  event.preventDefault();
+  if (index === normalized_files.length - 1) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    drop_target_index = event.clientY > midY ? normalized_files.length : index;
+  } else {
+    drop_target_index = index;
+  }
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "move";
+  }
+}
+function handle_drag_end(event) {
+  if (!event.dataTransfer?.dropEffect || event.dataTransfer.dropEffect === "none") {
+    dragging_index = null;
+    drop_target_index = null;
+  }
+}
+function handle_drop(event, index) {
+  event.preventDefault();
+  if (dragging_index === null || dragging_index === index)
+    return;
+  const files = Array.isArray(value) ? [...value] : [value];
+  const [removed] = files.splice(dragging_index, 1);
+  files.splice(
+    drop_target_index === normalized_files.length ? normalized_files.length : index,
+    0,
+    removed
+  );
+  const new_value = Array.isArray(value) ? files : files[0];
+  dispatch("change", new_value);
+  dragging_index = null;
+  drop_target_index = null;
+}
 function split_filename(filename) {
   const last_dot = filename.lastIndexOf(".");
   if (last_dot === -1) {
@@ -45,19 +90,42 @@ const is_browser = typeof window !== "undefined";
 
 <div
 	class="file-preview-holder"
-	style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
+	style:max-height={height
+		? typeof height === "number"
+			? height + "px"
+			: height
+		: "auto"}
 >
 	<table class="file-preview">
 		<tbody>
-			{#each normalized_files as file, i (file)}
+			{#each normalized_files as file, i (file.url)}
 				<tr
 					class="file"
 					class:selectable
+					class:dragging={dragging_index === i}
+					class:drop-target={drop_target_index === i ||
+						(i === normalized_files.length - 1 &&
+							drop_target_index === normalized_files.length)}
+					data-drop-target={drop_target_index === normalized_files.length &&
+					i === normalized_files.length - 1
+						? "after"
+						: drop_target_index === i + 1
+							? "after"
+							: "before"}
+					draggable={allow_reordering && normalized_files.length > 1}
 					on:click={(event) => {
 						handle_row_click(event, i);
 					}}
+					on:dragstart={(event) => handle_drag_start(event, i)}
+					on:dragenter|preventDefault
+					on:dragover={(event) => handle_drag_over(event, i)}
+					on:drop={(event) => handle_drop(event, i)}
+					on:dragend={handle_drag_end}
 				>
 					<td class="filename" aria-label={file.orig_name}>
+						{#if allow_reordering && normalized_files.length > 1}
+							<span class="drag-handle">⋮⋮</span>
+						{/if}
 						<span class="stem">{file.filename_stem}</span>
 						<span class="ext">{file.filename_ext}</span>
 					</td>
@@ -183,4 +251,30 @@ const is_browser = typeof window !== "undefined";
 	tbody > tr:nth-child(odd) {
 		background: var(--table-odd-background-fill);
 	}
+
+	.drag-handle {
+		cursor: grab;
+		color: var(--body-text-color-subdued);
+		padding-right: var(--size-2);
+		user-select: none;
+	}
+
+	.dragging {
+		opacity: 0.5;
+		cursor: grabbing;
+	}
+
+	.drop-target {
+		border-top: 2px solid var(--color-accent);
+	}
+
+	tr:last-child.drop-target[data-drop-target="before"] {
+		border-top: 2px solid var(--color-accent);
+		border-bottom: none;
+	}
+
+	tr:last-child.drop-target[data-drop-target="after"] {
+		border-top: none;
+		border-bottom: 2px solid var(--color-accent);
+	}
 </style>

package/dist/shared/FilePreview.svelte.d.ts

@@ -5,10 +5,12 @@ declare const __propDef: {
     props: {
         value: FileData | FileData[];
         selectable?: boolean | undefined;
-        height?: number | undefined;
+        height?: number | string | undefined;
         i18n: I18nFormatter;
+        allow_reordering?: boolean | undefined;
     };
     events: {
+        dragenter: DragEvent;
         select: CustomEvent<SelectData>;
         change: CustomEvent<any>;
         delete: CustomEvent<FileData>;

package/dist/shared/FileUpload.svelte

@@ -16,6 +16,7 @@ export let max_file_size = null;
 export let upload;
 export let stream_handler;
 export let uploading = false;
+export let allow_reordering = false;
 async function handle_upload({
   detail
 }) {
@@ -81,6 +82,7 @@ $:
 		{height}
 		on:change
 		on:delete
+		{allow_reordering}
 	/>
 {:else}
 	<Upload
@@ -94,6 +96,7 @@ $:
 		on:error
 		{stream_handler}
 		{upload}
+		{height}
 	>
 		<slot />
 	</Upload>

package/dist/shared/FileUpload.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         uploading?: boolean | undefined;
+        allow_reordering?: boolean | undefined;
     };
     events: {
         error: CustomEvent<any>;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@gradio/file",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.12.0",
-    "@gradio/client": "^1.8.0",
-    "@gradio/statustracker": "^0.9.7",
-    "@gradio/icons": "^0.8.1",
-    "@gradio/upload": "^0.14.3",
-    "@gradio/wasm": "^0.15.0",
-    "@gradio/utils": "^0.9.0"
+    "@gradio/atoms": "^0.13.0",
+    "@gradio/client": "^1.9.0",
+    "@gradio/icons": "^0.9.0",
+    "@gradio/statustracker": "^0.10.0",
+    "@gradio/utils": "^0.10.0",
+    "@gradio/upload": "^0.14.4",
+    "@gradio/wasm": "^0.16.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/FilePreview.svelte

@@ -13,8 +13,66 @@
 	}>();
 	export let value: FileData | FileData[];
 	export let selectable = false;
-	export let height: number | undefined = undefined;
+	export let height: number | string | undefined = undefined;
 	export let i18n: I18nFormatter;
+	export let allow_reordering = false;
+
+	let dragging_index: number | null = null;
+	let drop_target_index: number | null = null;
+
+	function handle_drag_start(event: DragEvent, index: number): void {
+		dragging_index = index;
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", index.toString());
+		}
+	}
+
+	function handle_drag_over(event: DragEvent, index: number): void {
+		event.preventDefault();
+		if (index === normalized_files.length - 1) {
+			const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+			const midY = rect.top + rect.height / 2;
+			drop_target_index =
+				event.clientY > midY ? normalized_files.length : index;
+		} else {
+			drop_target_index = index;
+		}
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = "move";
+		}
+	}
+
+	function handle_drag_end(event: DragEvent): void {
+		if (
+			!event.dataTransfer?.dropEffect ||
+			event.dataTransfer.dropEffect === "none"
+		) {
+			dragging_index = null;
+			drop_target_index = null;
+		}
+	}
+
+	function handle_drop(event: DragEvent, index: number): void {
+		event.preventDefault();
+		if (dragging_index === null || dragging_index === index) return;
+
+		const files = Array.isArray(value) ? [...value] : [value];
+		const [removed] = files.splice(dragging_index, 1);
+		files.splice(
+			drop_target_index === normalized_files.length
+				? normalized_files.length
+				: index,
+			0,
+			removed
+		);
+
+		const new_value = Array.isArray(value) ? files : files[0];
+		dispatch("change", new_value);
+
+		dragging_index = null;
+		drop_target_index = null;
+	}
 
 	function split_filename(filename: string): [string, string] {
 		const last_dot = filename.lastIndexOf(".");
@@ -66,19 +124,42 @@
 
 <div
 	class="file-preview-holder"
-	style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
+	style:max-height={height
+		? typeof height === "number"
+			? height + "px"
+			: height
+		: "auto"}
 >
 	<table class="file-preview">
 		<tbody>
-			{#each normalized_files as file, i (file)}
+			{#each normalized_files as file, i (file.url)}
 				<tr
 					class="file"
 					class:selectable
+					class:dragging={dragging_index === i}
+					class:drop-target={drop_target_index === i ||
+						(i === normalized_files.length - 1 &&
+							drop_target_index === normalized_files.length)}
+					data-drop-target={drop_target_index === normalized_files.length &&
+					i === normalized_files.length - 1
+						? "after"
+						: drop_target_index === i + 1
+							? "after"
+							: "before"}
+					draggable={allow_reordering && normalized_files.length > 1}
 					on:click={(event) => {
 						handle_row_click(event, i);
 					}}
+					on:dragstart={(event) => handle_drag_start(event, i)}
+					on:dragenter|preventDefault
+					on:dragover={(event) => handle_drag_over(event, i)}
+					on:drop={(event) => handle_drop(event, i)}
+					on:dragend={handle_drag_end}
 				>
 					<td class="filename" aria-label={file.orig_name}>
+						{#if allow_reordering && normalized_files.length > 1}
+							<span class="drag-handle">⋮⋮</span>
+						{/if}
 						<span class="stem">{file.filename_stem}</span>
 						<span class="ext">{file.filename_ext}</span>
 					</td>
@@ -204,4 +285,30 @@
 	tbody > tr:nth-child(odd) {
 		background: var(--table-odd-background-fill);
 	}
+
+	.drag-handle {
+		cursor: grab;
+		color: var(--body-text-color-subdued);
+		padding-right: var(--size-2);
+		user-select: none;
+	}
+
+	.dragging {
+		opacity: 0.5;
+		cursor: grabbing;
+	}
+
+	.drop-target {
+		border-top: 2px solid var(--color-accent);
+	}
+
+	tr:last-child.drop-target[data-drop-target="before"] {
+		border-top: 2px solid var(--color-accent);
+		border-bottom: none;
+	}
+
+	tr:last-child.drop-target[data-drop-target="after"] {
+		border-top: none;
+		border-bottom: 2px solid var(--color-accent);
+	}
 </style>

package/shared/FileUpload.svelte

@@ -22,6 +22,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let uploading = false;
+	export let allow_reordering = false;
 
 	async function handle_upload({
 		detail
@@ -97,6 +98,7 @@
 		{height}
 		on:change
 		on:delete
+		{allow_reordering}
 	/>
 {:else}
 	<Upload
@@ -110,6 +112,7 @@
 		on:error
 		{stream_handler}
 		{upload}
+		{height}
 	>
 		<slot />
 	</Upload>