File table style with accessible file name texts (#6520)

* File table style with accessible file name texts

* Fix for lint

* add changeset

* Remove unnecessary style

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/stupid-knives-fold.md

@@ -0,0 +1,6 @@
+---
+"@gradio/file": minor
+"gradio": minor
+---
+
+feat:File table style with accessible file name texts

js/file/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;
 	}

js/file/shared/utils.ts

@@ -10,31 +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 => {
-	const orig_name: string = value.orig_name ?? "";
-	const max_length = 30;
-
-	if (orig_name.length > max_length) {
-		const truncated_name = orig_name.substring(0, max_length);
-		const file_extension_index = orig_name.lastIndexOf(".");
-		if (file_extension_index !== -1) {
-			const file_extension = orig_name.slice(file_extension_index);
-			return `${truncated_name}..${file_extension}`;
-		}
-		return truncated_name;
-	}
-	return orig_name;
-};
-
-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);
-};