marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 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; onfileParsed?: (result: FilenameParseResult) => void;
} = $props(); } = $props();
let selectedFilename = $state<string | null>(null);
function handleFileChange(e: Event) { function handleFileChange(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (!file) return; if (!file) return;
selectedFilename = file.name;
const parsed = parseFilename(file.name); const parsed = parseFilename(file.name);
const result: FilenameParseResult = { const result: FilenameParseResult = {
...parsed, ...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" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/> />
</svg> </svg>
<span class="text-sm font-medium text-ink-2"> {#if selectedFilename}
{m.doc_file_upload_label()} <span class="text-ink-1 text-sm font-medium">{selectedFilename}</span>
</span> {:else}
<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span> <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> </label>
<div class="px-6 pb-6"> <input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
<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>
</div> </div>