Schematics
SCHEMATICS
<section class="rise">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Upload schematic</h1>
</section>

<section class="rise rise-1 mt-6 max-w-2xl">
    <form enctype="multipart/form-data" method="post" action="/api/schematics/uploading"
          class="ring-card flex flex-col gap-4 rounded-2xl bg-card p-5 sm:flex-row sm:items-center">
        <label for="formFile"
               class="flex flex-1 cursor-pointer items-center gap-3 rounded-xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm transition-colors hover:border-foreground/30 hover:bg-muted/50">
            <svg class="size-5 text-muted-foreground" aria-hidden="true"><use href="#i-upload"/></svg>
            <span class="text-muted-foreground">
                <span class="text-foreground">Choose a file</span> &mdash; or drag it onto this field
            </span>
            <input id="formFile" type="file" name="file" class="sr-only">
        </label>
        <button type="submit"
                class="inline-flex h-10 items-center justify-center gap-1.5 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/85">
            Upload
            <svg class="size-3.5" aria-hidden="true"><use href="#i-arrow-right"/></svg>
        </button>
    </form>
    <p id="picked-name" class="mt-3 text-xs text-muted-foreground"></p>
</section>

<script>
    (function () {
        const input = document.getElementById('formFile');
        const out = document.getElementById('picked-name');
        if (!input || !out) return;
        input.addEventListener('change', () => {
            out.textContent = input.files && input.files[0] ? 'selected: ' + input.files[0].name : '';
        });
    })();
</script>