File Upload
FileUpload
A file upload component with drag-and-drop support, validation, and image previews.
Single File Upload
Basic single file upload with drag-and-drop support.
Multiple File Upload
Upload multiple files at once with file list display.
Image Upload with Previews
Upload images with thumbnail previews.
Document Upload
Upload PDF and Word documents only.
File Size Limit
Upload files with a maximum size of 2MB.
File Count Limit
Upload up to 3 files maximum.
Without Upload Progress
File upload without progress indicator.
Disabled State
Disabled file upload component.
Form Integration with Validation
File upload integrated with Blazor's EditForm and validation.
Custom Styling
File upload with custom CSS classes.
All Features Combined
Demonstrates all features: multiple files, file type restriction, size limit, count limit, previews, and progress.
Features enabled in this example:
Multiple="true"— up to 5 filesAccept— JPEG, PNG, GIF, WebP onlyMaxFileSize="5242880"— 5 MB per fileMaxFiles="5"— maximum file countShowPreview="true"— thumbnail previewsShowProgress="true"— upload progress indicator
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Files | IBrowserFile list | — | The selected files. Use @bind-Files for two-way binding. |
| Multiple | bool | false | Whether to allow multiple file selection. |
| Accept | string? | null | Accepted file types (MIME types or extensions). |
| MaxFileSize | long | 512000 | Maximum file size in bytes. |
| MaxFiles | int | 10 | Maximum number of files allowed. |
| ShowPreview | bool | false | Whether to show image previews for image files. |
| ShowProgress | bool | true | Whether to show upload progress indicator. |
| Disabled | bool | false | Whether the upload zone is disabled. |
| DropZoneText | string? | null | Custom text for the drop zone. |
| ShowValidationError | bool | false | Whether to show validation errors. |
| Class | string? | null | Additional CSS classes for the root element. |