File Upload

<NaviusFileUpload Multiple MaxFiles="4" Accept="image/*,.pdf" class="space-y-3">
    <NaviusFileUploadDropzone class="rounded-lg border border-dashed p-6 text-center data-[dragging]:border-primary">
        <NaviusFileUploadInput />
        Drop files here, or <NaviusFileUploadTrigger>browse</NaviusFileUploadTrigger>
    </NaviusFileUploadDropzone>
    <NaviusFileUploadList>
        <ItemTemplate Context="file">
            <div class="flex items-center gap-2 rounded-md border px-2 py-1">
                <NaviusFileUploadItemName class="flex-1 truncate" />
                <NaviusFileUploadItemSize class="text-xs text-muted-foreground" />
                <NaviusFileUploadItemDelete aria-label="Remove file">&times;</NaviusFileUploadItemDelete>
            </div>
        </ItemTemplate>
    </NaviusFileUploadList>
</NaviusFileUpload>

Features

• The hidden <input type="file"> (the Input part) is the a11y + form source of truth; the Trigger and Dropzone merely relay to it, so native keyboard, the OS dialog and screen-reader announcements come for free.
• A drop anywhere on the root copies files into the input; data-dragging mirrors the engine's drag state onto the root and dropzone.
• Each selection is validated against Accept / MaxSize / MaxFiles; accepted files raise OnAccepted, refused ones raise OnRejected with a reason.
• Controlled via @bind-Files or uncontrolled; a polite live region announces added / rejected / removed counts.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add file-upload

Anatomy

Import the parts and assemble them. The Input must live inside the Dropzone (or the root); the List renders one Item per file.

@using Navius.Primitives.Components.FileUpload

<NaviusFileUpload>
    <NaviusFileUploadDropzone>
        <NaviusFileUploadInput />
        <NaviusFileUploadTrigger />
    </NaviusFileUploadDropzone>
    <NaviusFileUploadList>
        <ItemTemplate Context="file">
            <NaviusFileUploadItemName />
            <NaviusFileUploadItemSize />
            <NaviusFileUploadItemDelete />
        </ItemTemplate>
    </NaviusFileUploadList>
    <NaviusFileUploadClear />
</NaviusFileUpload>

API Reference

Root

NaviusFileUpload. Owns the file list, validation and the drag/drop relay. Renders a div with a visually-hidden polite status region. Files is two-way bindable.

Data attributes

Dropzone

NaviusFileUploadDropzone. A focusable drop target; Enter/Space open the file dialog. Renders a div with role=button.

Data attributes

Input

NaviusFileUploadInput. The real, visually-hidden InputFile (a11y + form truth). accept / multiple / webkitdirectory / capture / name flow from the root. Renders an input.

Trigger

NaviusFileUploadTrigger. A plain button that opens the OS dialog by relaying to the input. Renders a button.

Data attributes

List

NaviusFileUploadList. The selected-files list; auto-renders one Item per file via ItemTemplate, or takes explicit children. Renders a ul with role=list.

Item

NaviusFileUploadItem. One file row; cascades a context so its name/size/delete children know their file. Renders an li with role=listitem.

Data attributes

ItemName / ItemSize / ItemDelete

Inside an Item: the file name (span), the human-readable size (span) and a per-file remove button (button, aria-label 'Remove {name}'). Each takes an optional child + splat.

Clear

NaviusFileUploadClear. Clears all files; disabled when the list is already empty. Renders a button.

Data attributes

Accessibility

The interactive path is a real file input, so keyboard and the OS dialog work natively. The Dropzone follows react-aria's DropZone (role="button", Enter / Space to browse); drag-and-drop is pointer-only sugar. A visually-hidden role="status" aria-live="polite" region announces added / rejected / removed counts. Rejections arrive as NaviusFileRejection with a FileRejectionReason (TooLarge / TooMany / WrongType).