FileInput: Blazor file input component

Examples

Picking a file

OnChange receives InputFileChangeEventArgs with the file's name, size and stream.

No file chosen yet.

website/Examples/DataInput/FileInputBasicExample.razor Source

Several images

Accept filters the picker; Multiple allows several files at once.

Screenshots (images, several at once)

No images chosen yet.

website/Examples/DataInput/FileInputMultipleExample.razor Source

Styles

Color, Size and Ghost.

website/Examples/DataInput/FileInputStylesExample.razor Source

Playground

Color Color

Size Size

Ghost

Multiple

<FileInput Color="Color.Primary" />

API

<FileInput>

DaisyBlazor

Parameters

Accept string
= null
Constrains the file picker to specific MIME types or extensions (e.g. "image/*", ".pdf").
Color Color
= Color.Default
Semantic color applied as file-input-{token} (e.g. file-input-primary).
Ghost bool
= false
Applies the ghost variant (file-input-ghost) for a borderless, transparent style.
Label string
= null
Optional label rendered above the input in a fieldset and associated with it via for/id.
Multiple bool
= false
When true the browser allows picking more than one file.
Size Size
= Size.Medium
Size of the control: Small → file-input-sm, Medium → file-input-md, Large → file-input-lg.
Class string
= null
Extra CSS classes merged onto the file input.
Style string
= null
Inline CSS styles applied to the file input.

Name	Type	Default	Description
Accept	string	null	Constrains the file picker to specific MIME types or extensions (e.g. "image/*", ".pdf").
Color	Color	Color.Default	Semantic color applied as file-input-{token} (e.g. file-input-primary).
Ghost	bool	false	Applies the ghost variant (file-input-ghost) for a borderless, transparent style.
Label	string	null	Optional label rendered above the input in a fieldset and associated with it via for/id.
Multiple	bool	false	When true the browser allows picking more than one file.
Size	Size	Size.Medium	Size of the control: Small → file-input-sm, Medium → file-input-md, Large → file-input-lg.
Class	string	null	Extra CSS classes merged onto the file input.
Style	string	null	Inline CSS styles applied to the file input.

Events

OnChange EventCallback<InputFileChangeEventArgs>
Raised when the user selects one or more files.

Name	Type	Description
OnChange	EventCallback<InputFileChangeEventArgs>	Raised when the user selects one or more files.

From MudFileUpload

FileInput keeps MudFileUpload's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.