a7eaa40852
Some checks failed
CI / Unit & Component Tests (pull_request) Successful in 2m47s
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
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>
60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { parseFilename, stripExtension, type FilenameParseResult } from '$lib/utils/filename';
|
|
|
|
let {
|
|
onfileParsed
|
|
}: {
|
|
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,
|
|
suggestedTitle: parsed.suggestedTitle ?? stripExtension(file.name)
|
|
};
|
|
onfileParsed?.(result);
|
|
}
|
|
</script>
|
|
|
|
<div class="rounded-sm border border-line bg-surface shadow-sm">
|
|
<div class="border-b border-line px-6 py-4">
|
|
<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.doc_section_file()}
|
|
</h2>
|
|
</div>
|
|
|
|
<label
|
|
for="file-upload"
|
|
class="flex cursor-pointer flex-col items-center gap-3 px-6 py-10 transition-colors hover:bg-muted/40"
|
|
>
|
|
<svg
|
|
class="h-10 w-10 text-ink-3"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="1.5"
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
|
/>
|
|
</svg>
|
|
{#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>
|
|
<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
|
|
</div>
|