From a7eaa40852a3c40e22b1bc959e85838353708a38 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 07:04:54 +0100
Subject: [PATCH] fix(#68): hide native file input, show selected filename in
 upload zone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The native browser file input showed an untranslatable "Browse…" button
and "No file selected" text. The input is now sr-only; the large upload
zone label acts as the sole click target. When a file is selected its
name replaces the prompt text inside the zone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../documents/new/FileSectionNew.svelte       | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/frontend/src/routes/documents/new/FileSectionNew.svelte b/frontend/src/routes/documents/new/FileSectionNew.svelte
index 9ab27047..e22d2e0d 100644
--- a/frontend/src/routes/documents/new/FileSectionNew.svelte
+++ b/frontend/src/routes/documents/new/FileSectionNew.svelte
@@ -8,9 +8,12 @@ let {
 	onfileParsed?: (result: FilenameParseResult) => void;
 } = $props();
 
+let selectedFilename = $state<string | null>(null);
+
 function handleFileChange(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
 	if (!file) return;
+	selectedFilename = file.name;
 	const parsed = parseFilename(file.name);
 	const result: FilenameParseResult = {
 		...parsed,
@@ -45,23 +48,12 @@ function handleFileChange(e: Event) {
 				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
 			/>
 		</svg>
-		<span class="text-sm font-medium text-ink-2">
-			{m.doc_file_upload_label()}
-		</span>
-		<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{#if selectedFilename}
+			<span class="text-ink-1 text-sm font-medium">{selectedFilename}</span>
+		{:else}
+			<span class="text-sm font-medium text-ink-2">{m.doc_file_upload_label()}</span>
+			<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{/if}
 	</label>
-	<div class="px-6 pb-6">
-		<input
-			id="file-upload"
-			type="file"
-			name="file"
-			onchange={handleFileChange}
-			class="block w-full cursor-pointer rounded border border-dashed border-line p-2 text-sm
-			       text-ink-2 file:mr-4 file:rounded
-			       file:border-0 file:bg-muted
-			       file:px-4 file:py-2
-			       file:text-sm file:font-semibold
-			       file:text-ink hover:file:bg-muted"
-		/>
-	</div>
+	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
 </div>