FileUpload
Drop-zone file picker supporting click and drag-and-drop. Wraps Blazor's InputFile in a styled region with idle, drag-over, and file-selected visual states.
Examples
Single-file with default labels
Drop a file here or click to browse
.txt or .md, max 64 KB
Custom label and icon
Upload your license
Drop the .lic file here
Multiple files
Drop one or more images
Disabled
Uploads paused — try again later
Borderless / no padding (compact)
Drop a file
Button display mode
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| FileUpload | A drop-zone wrapper around InputFile with click + drag-and-drop selection, idle / drag-over / file-selected visual states, leading icon, primary label, and optional helper text. Encapsulates the dashed-border / drag-highlight / size-formatting boilerplate consumers would otherwise repeat. Use the Borders / Gutters flags to control wrapper styling per §5.13. |
FileUpload
A drop-zone wrapper around InputFile with click + drag-and-drop selection, idle / drag-over / file-selected visual states, leading icon, primary label, and optional helper text. Encapsulates the dashed-border / drag-highlight / size-formatting boilerplate consumers would otherwise repeat. Use the Borders / Gutters flags to control wrapper styling per §5.13.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Primary text shown in the idle drop zone. Default: "Drop a file here or click to browse". | |
| HelpText | string? | Smaller helper text under the label (e.g. accepted formats and size limit). | |
| Accept | string? | Forwarded to the underlying <input type="file"> accept attribute (e.g. ".lic", "image/*"). | |
| MaxAllowedSize | long | Forwarded to IBrowserFile.OpenReadStream(maxAllowedSize) consumers. Default: 512_000 (Blazor's stock cap). Note: this Chunk does not enforce the cap itself — pass it through when you read the stream. | |
| Multiple | bool | Allow selecting more than one file. Switches the active callback from OnFileSelected to OnFilesSelected. Default: false. | |
| Disabled | bool | Disables click and drop. Visual is dimmed and the cursor flips to not-allowed. Default: false. | |
| IconSvg | string | Leading SVG path for the idle state. Default: IconSvg.Upload. | |
| SelectedIconSvg | string | Leading SVG path for the file-selected state. Default: IconSvg.FileDocumentOutline. | |
| DisplayMode | FileUploadDisplayMode | Visual layout. DropTarget (default) renders a dashed-border drop zone with vertical icon + label + helper. Button renders a single outline-button-styled control with an inline file-name strip beside it — use when space is tight or drag-and-drop is undesirable. | |
| Borders | bool | Toggle the dashed border (DropTarget mode) or the outline border (Button mode). Default: true. | |
| Gutters | bool | Toggle inner padding (p-6). Default: true. | |
| OnFileSelected | EventCallback<IBrowserFile> | Fires when a single file is selected (click or drop). Used when Multiple=false. | |
| OnFilesSelected | EventCallback<IReadOnlyList<IBrowserFile>> | Fires when one or more files are selected. Used when Multiple=true. | |
| ClassName | string? | Escape-hatch extra Tailwind classes appended to the outer wrapper. Prefer the wrapper-styling parameters above first. |