File Input

A server-rendered file upload control that keeps native multipart/form-data submissions while adding Alpine-powered drag-and-drop, previews, and file removal.

Basic Button

Source

<RzFileInput Name="attachments" Variant="FileInputVariant.Button" />

Dropzone

Source

<RzFileInput Name="documents"
             Variant="FileInputVariant.Dropzone"
             Multiple="true"
             Accept=".pdf,.doc,.docx" />

Image Preview

Source

<RzFileInput Name="photos"
             Variant="FileInputVariant.Dropzone"
             Multiple="true"
             Accept="image/*" />

SSR Form Integration

The component renders a native file input. Posting this form directly to an ASP.NET Core endpoint sends files without requiring a Blazor circuit.

Source

<form method="post" enctype="multipart/form-data" action="/uploads">
    <RzFileInput Name="uploadFiles" Multiple="true" Variant="FileInputVariant.Dropzone" />
    <RzButton class="mt-4" type="submit">Upload</RzButton>
</form>

Accessibility

RzFileInput keeps a native <input type="file"> in the DOM for browser semantics and standard form posts. The visible trigger and dropzone reference persistent instructions and the selected-file status region with aria-describedby, while the native input exposes aria-invalid when validation state is available through For.

Keyboard users can focus the custom trigger when enabled and press Enter or Space to open the native file picker. The native input remains labeled by AriaLabel, uses Name for SSR form submission, and honors Multiple, Accept, and Disabled. When disabled, the native input is disabled and the custom trigger is marked aria-disabled="true" and removed from the tab order.

Pointer users may drag files onto the component when the browser exposes drag-and-drop files. Drag state is reflected with data-dragging for styling only; keyboard and assistive-technology users should use the trigger or the native file picker because operating-system drag/drop is not consistently exposed to screen readers.

Selected files render in a list labeled “Selected files”. Image previews use file-specific alt text, and each remove button receives a file-specific accessible name such as “Remove invoice.pdf”. Selection and removal changes update a restrained polite live region and dispatch rz:file-input:state-change with serializable file names and counts. Initial hydration does not announce existing state to avoid unnecessary screen-reader noise.

The Alpine runtime is loaded through the existing async bundle manifest for both standard and CSP-friendly shells. It does not require a Blazor circuit, does not steal focus after selection or removal, and revokes generated preview URLs during synchronization and teardown.

Component Parameters

Property	Type	Default	Description
`Name`	`string?`	`null`	Posted field name for standard form submissions.
`Multiple`	`bool`	`false`	Enables selecting and posting multiple files.
`Accept`	`string?`	`null`	Accepted MIME types/extensions (for example `image/*`).
`Variant`	`FileInputVariant`	`Default`	Choose compact button style or dropzone style.
`Disabled`	`bool`	`false`	Disables file selection and drag/drop interactions.
`AriaLabel`	`string?`	"File input"	Accessible label applied to the custom trigger and native input. Provide a task-specific label when multiple file inputs are on the same page.
`For`	`Expression<Func<object?>>?`	`null`	Optional model expression used to mirror validation state styles.