@gradio/file 0.2.7 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gradio/file
 
+## 0.3.0
+
+### Features
+
+- [#6511](https://github.com/gradio-app/gradio/pull/6511) [`71f1a1f99`](https://github.com/gradio-app/gradio/commit/71f1a1f9931489d465c2c1302a5c8d768a3cd23a) - Mark `FileData.orig_name` optional on the frontend aligning the type definition on the Python side.  Thanks [@whitphx](https://github.com/whitphx)!
+- [#6520](https://github.com/gradio-app/gradio/pull/6520) [`f94db6b73`](https://github.com/gradio-app/gradio/commit/f94db6b7319be902428887867500311a6a32a165) - File table style with accessible file name texts.  Thanks [@whitphx](https://github.com/whitphx)!
+
 ## 0.2.7
 
 ### Patch Changes
@@ -240,4 +247,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/file",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,10 +8,10 @@
   "private": false,
   "dependencies": {
     "@gradio/atoms": "^0.3.0",
-    "@gradio/client": "^0.8.1",
     "@gradio/icons": "^0.3.0",
     "@gradio/statustracker": "^0.4.0",
-    "@gradio/upload": "^0.5.0",
+    "@gradio/client": "^0.8.2",
+    "@gradio/upload": "^0.5.1",
     "@gradio/utils": "^0.2.0"
   },
   "main": "./Index.svelte",

package/shared/FilePreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
-	import { display_file_name, display_file_size } from "./utils";
+	import { prettyBytes } from "./utils";
 	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter, SelectData } from "@gradio/utils";
 
@@ -11,6 +11,23 @@
 	export let selectable = false;
 	export let height: number | undefined = undefined;
 	export let i18n: I18nFormatter;
+
+	function split_filename(filename: string): [string, string] {
+		const last_dot = filename.lastIndexOf(".");
+		if (last_dot === -1) {
+			return [filename, ""];
+		}
+		return [filename.slice(0, last_dot), filename.slice(last_dot)];
+	}
+
+	$: normalized_files = (Array.isArray(value) ? value : [value]).map((file) => {
+		const [filename_stem, filename_ext] = split_filename(file.orig_name ?? "");
+		return {
+			...file,
+			filename_stem,
+			filename_ext
+		};
+	});
 </script>
 
 <div
@@ -19,7 +36,7 @@
 >
 	<table class="file-preview">
 		<tbody>
-			{#each Array.isArray(value) ? value : [value] as file, i}
+			{#each normalized_files as file, i}
 				<tr
 					class="file"
 					class:selectable
@@ -29,8 +46,9 @@
 							index: i
 						})}
 				>
-					<td>
-						{display_file_name(file)}
+					<td class="filename" aria-label={file.orig_name}>
+						<span class="stem">{file.filename_stem}</span>
+						<span class="ext">{file.filename_ext}</span>
 					</td>
 
 					<td class="download">
@@ -40,7 +58,9 @@
 								target="_blank"
 								download={window.__is_colab__ ? null : file.orig_name}
 							>
-								{@html display_file_size(file)}&nbsp;&#8675;
+								{@html file.size != null
+									? prettyBytes(file.size)
+									: "(size unknown)"}&nbsp;&#8675;
 							</a>
 						{:else}
 							{i18n("file.uploading")}
@@ -53,26 +73,17 @@
 </div>
 
 <style>
-	td {
-		width: 45%;
-	}
-
-	td:last-child {
-		width: 10%;
-		text-align: right;
-	}
-	.file-preview-holder {
-		overflow-x: auto;
-		overflow-y: auto;
-	}
 	.file-preview {
+		table-layout: fixed;
 		width: var(--size-full);
 		max-height: var(--size-60);
 		overflow-y: auto;
 		margin-top: var(--size-1);
 		color: var(--body-text-color);
 	}
+
 	.file {
+		display: flex;
 		width: var(--size-full);
 	}
 
@@ -80,6 +91,26 @@
 		padding: var(--size-1) var(--size-2-5);
 	}
 
+	.filename {
+		flex-grow: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	.filename .stem {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.filename .ext {
+		white-space: nowrap;
+	}
+
+	.download {
+		min-width: 8rem;
+		width: 10%;
+		white-space: nowrap;
+		text-align: right;
+	}
 	.download:hover {
 		text-decoration: underline;
 	}

package/shared/utils.ts

@@ -10,32 +10,3 @@ export const prettyBytes = (bytes: number): string => {
 	let unit = units[i];
 	return bytes.toFixed(1) + " " + unit;
 };
-
-export const display_file_name = (value: FileData): string => {
-	var str: string;
-	str = value.orig_name;
-	const max_length = 30;
-
-	if (str.length > max_length) {
-		const truncated_name = str.substring(0, max_length);
-		const file_extension_index = str.lastIndexOf(".");
-		if (file_extension_index !== -1) {
-			const file_extension = str.slice(file_extension_index);
-			return `${truncated_name}..${file_extension}`;
-		}
-		return truncated_name;
-	}
-	return str;
-};
-
-export const display_file_size = (value: FileData | FileData[]): string => {
-	var total_size = 0;
-	if (Array.isArray(value)) {
-		for (var file of value) {
-			if (file.size !== undefined) total_size += file.size;
-		}
-	} else {
-		total_size = value.size || 0;
-	}
-	return prettyBytes(total_size);
-};