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>

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 trigger and native input.
`For`	`Expression<Func<object?>>?`	`null`	Optional model expression used to mirror validation state styles.