marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(#68): hide native file input, show selected filename in upload zone
Some checks failed
CI / Unit & Component Tests (pull_request) Successful in 2m47s
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details

Browse Source 
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>
This commit was merged in pull request #88.
This commit is contained in:
Marcel
2026-03-27 07:04:54 +01:00
parent c5e28ac18e
commit a7eaa40852
1 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/routes/documents/new/FileSectionNew.svelte
View File

@@ -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>