File Upload

Overview

File Upload wraps a real, visually-hidden <input type="file"> that carries the form value and stays outside the tab order and accessibility tree (tabindex="-1", aria-hidden); the Dropzone and Trigger are the accessible controls that relay to it to open the OS dialog. A drop anywhere on the root copies files into the hidden input, each selection is validated against Accept / MaxSize / MaxFiles, and a polite live region announces added / rejected / removed counts.

Anatomy

@using Navius.Primitives.Components.FileUpload

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

Root

Prop	Type	Default	Description
`Files`	`IReadOnlyList<IBrowserFile>?`	-	Controlled file list. Pair with `FilesChanged` (`@bind-Files`).
`FilesChanged`	`EventCallback<IReadOnlyList<IBrowserFile>>`	-	Fires when the controlled `Files` should change.
`Accept`	`string?`	-	Comma-separated MIME types / extensions (native `accept`).
`Multiple`	`bool`	`false`	-
`MaxFiles`	`int?`	-	Cap on the total number of files.
`MaxSize`	`long`	`0`	Per-file byte ceiling (`0` = unlimited).
`Directory`	`bool`	`false`	Accept a whole directory (native `webkitdirectory`).
`Capture`	`string?`	-	Native `capture` hint (`"user"` / `"environment"`).
`Disabled`	`bool`	`false`	-
`Name`	`string?`	-	Form field name (applied to the real file input).
`OnAccepted`	`EventCallback<IReadOnlyList<IBrowserFile>>`	-	Fires with the accepted files of a selection.
`OnRejected`	`EventCallback<IReadOnlyList<NaviusFileRejection>>`	-	Fires with the refused files of a selection.
`ChildContent`	`RenderFragment?`	-	The upload’s parts.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Dropzone

Prop	Type	Default	Description
`AriaLabel`	`string?`	`"Drop files here or press Enter to browse"`	Accessible name for the drop target.
`ChildContent`	`RenderFragment?`	-	Dropzone content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Input

Prop	Type	Default	Description
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `input`. `accept` / `multiple` / `webkitdirectory` / `capture` / `name` flow from the Root’s parameters.

Trigger

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Trigger label content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button`.

List

Prop	Type	Default	Description
`ItemTemplate`	`RenderFragment<IBrowserFile>?`	-	Renders the inside of each item row for a file; auto-wraps it in an Item.
`ChildContent`	`RenderFragment?`	-	Explicit children (alternative to `ItemTemplate`).
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `ul`.

Item

Prop	Type	Default	Description
`File`	`IBrowserFile`	required	The file this row describes.
`Invalid`	`bool`	`false`	Marks this row invalid (e.g. a failed upload).
`ChildContent`	`RenderFragment?`	-	Row content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `li`.

ItemName

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Overrides the default text (the file’s name).
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `span`.

ItemSize

Prop	Type	Default	Description
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `span`.

ItemDelete

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Button content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button` (auto `aria-label="Remove {name}"`).

Clear

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Button content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button`.

Data attributes

Part	Attribute	Description
Root	`data-navius-file-upload`	Present on the root.
Root	`data-disabled`	Present when disabled.
Root	`data-invalid`	Present when the last selection had a rejection.
Root	`data-dragging`	Present while files are dragged over the root.
Dropzone	`data-navius-file-upload-dropzone`	Present on the drop target.
Dropzone	`data-dragging`	Present while files are dragged over it.
Dropzone	`data-disabled`	Present when disabled.
Input	`data-navius-file-upload-input`	Present on the hidden input.
Trigger	`data-navius-file-upload-trigger`	Present on the trigger button.
Trigger	`data-disabled`	Present when disabled.
List	`data-navius-file-upload-list`	Present on the file list.
Item	`data-navius-file-upload-item`	Present on each row.
Item	`data-invalid`	Present when the row is marked invalid.
ItemName	`data-navius-file-upload-item-name`	Present on the file name.
ItemSize	`data-navius-file-upload-item-size`	Present on the file size.
ItemDelete	`data-navius-file-upload-item-delete`	Present on the remove button.
Clear	`data-navius-file-upload-clear`	Present on the clear button.
Clear	`data-disabled`	Present when disabled or the list is empty.

ARIA mechanism

The hidden file input carries the form value but is kept out of the tab order and accessibility tree (tabindex="-1", aria-hidden); the accessible controls are the Dropzone (role="button" with a default label, Enter / Space to browse) and the Trigger (a plain button). Drag-and-drop is pointer-only sugar layered on top. A visually-hidden role="status" aria-live="polite" region announces added / rejected / removed counts. Rejections arrive as NaviusFileRejection with a FileRejectionReason (TooLarge / TooMany / WrongType). Covered by the Playwright browser test suite.