File Upload

Overview

FileUpload renders NaviusFileUpload, the headless primitive that owns drag-and-drop, the hidden native input, and file validation, and composes its Dropzone, List, and Clear parts with a dashed-border prompt and per-file rows (icon, name, size, and a remove button). The wrapper owns its own controlled/uncontrolled file-list mirror: Files is forwarded to the primitive only when the consumer actually set it.

Install

navius add file-upload --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsFileUpload @bind-Files="_files" Multiple="true" Accept="image/*"
               Hint="PNG or JPG up to 5MB" />

@code {
    private IReadOnlyList<IBrowserFile>? _files;
}

Parts and props

Accept, Multiple, MaxFiles, MaxSize, Directory, Capture, Disabled, Name, OnAccepted, OnRejected, and Attributes pass through to NaviusFileUpload unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`Files`	`IReadOnlyList<IBrowserFile>?`	`null`	Controlled file list. Bind with `@bind-Files`; forwarded to the primitive only when set.
`Hint`	`string?`	`null`	Optional hint line rendered under the dropzone prompt.

Styling surface

Attributes on ZitsFileUpload is merged onto the root NaviusFileUpload via Cn.Merge, with the caller’s classes applied last. The dropzone, per-file row, and clear-button classes are internal to the composition and not independently overridable per-instance.

Data attribute hooks

Part	Attribute	Description
Dropzone	`data-dragging`	Present while a drag is over the dropzone, emitted by `NaviusFileUploadDropzone`; accents the border and background.
Dropzone	`data-disabled`	Present when `Disabled` is true, emitted by `NaviusFileUploadDropzone`.

Underlying primitives

NaviusFileUpload