FileUpload
BitFileUpload component wraps the HTML file input element(s) and uploads them to a given URL. The files can be removed by specifying the URL they have been uploaded. Moreover, it provides several other options including single or multiple or automatic file uploading. By automatic, it means the files can be automatically uploaded after being selected. It is possible to specify a maximum size for each file if need be. Additionally, by specifying file extensions, the files can be restricted to certain types.
Usage
Basic
Files can be uploaded after selecting them.
Multiple
Multiple files can be selected.
AutoUpload
The BitFileUpload can automatically starts the upload after file selection is done.
AutoReset
Automatically resets the BitFileUpload state each time before browsing files.
Append
When selected, additional files will be appended to the existing list without overwriting previous selections.
MaxSize
The file size can be limited using the MaxSize parameter.
AllowedExtensions
Limits file browsing by the provided file extensions.
Removable
Enables the remove functionality of the BitFileUpload.
Events
Different events can be configured for the upload process.
No File
Http requests
The http requests of Upload and Remove can be customized with http headers and query strings.
Chunked
Files can be uploaded in chunks.
Templates
The BitFileUpload can be further customized using templates.
Drag and drop or
Browse file
Public API
Use a custom method for the open file selection dialog.
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with the UploadIcon,
PauseIcon, CancelIcon, and RemoveIcon parameters (BitIconInfo).
FontAwesome:
Bootstrap:
API
BitFileUpload parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accept | string? | null | The value of the accept attribute of the input element. |
| AllowedExtensions | IReadOnlyCollection<string> | ["*"] | Filters files by extension. |
| Append | bool | false | Enables the append mode that appends any additional selected file(s) to the current file list. |
| AutoChunkSize | bool | false | Calculate the chunk size dynamically based on the user's Internet speed between 512 KB and 10 MB. |
| AutoReset | bool | false | Automatically resets the file-upload before starting to browse for files. |
| AutoUpload | bool | false | Automatically starts the upload file(s) process immediately after selecting the file(s). |
| CancelIcon | BitIconInfo? | null | The icon to use for the cancel upload button using custom CSS classes for external icon libraries. Takes precedence over CancelIconName when both are set. |
| CancelIconName | string? | null | The name of the icon to use for the cancel upload button from the built-in Fluent UI icons. Defaults to Cancel when not set. |
| ChunkedUpload | bool | false | Enables the chunked upload. |
| ChunkSize | long? | null | The size of each chunk of file upload in bytes. |
| FailedRemoveMessage | string | File remove failed | The message shown for failed file removes. |
| FailedUploadMessage | string | File upload failed | The message shown for failed file uploads. |
| FileViewTemplate | RenderFragment<BitFileInfo>? | null | The custom file view template. |
| HideFileView | bool | false | Hides the file view section of the file upload. |
| Label | string | Browse | The text of select file button. |
| LabelTemplate | RenderFragment? | null | A custom razor fragment for select button. |
| MaxSize | long | 0 | Specifies the maximum size (byte) of the file (0 for unlimited). |
| MaxSizeErrorMessage | string | The file size is larger than the max size | Specifies the message for the failed uploading progress due to exceeding the maximum size. |
| Multiple | bool | false | Enables multi-file selection. |
| NotAllowedExtensionErrorMessage | string | The file type is not allowed | Specifies the message for the failed uploading progress due to the allowed extensions. |
| OnAllUploadsComplete | EventCallback<BitFileInfo[]> | Callback for when all files are uploaded. | |
| OnChange | EventCallback<BitFileInfo[]> | Callback for when file or files status change. | |
| OnProgress | EventCallback<BitFileInfo> | Callback for when the file upload is progressed. | |
| OnRemoveComplete | EventCallback<BitFileInfo> | Callback for when a remove file is done. | |
| OnRemoveFailed | EventCallback<BitFileInfo> | Callback for when a remove file is failed. | |
| OnUploading | EventCallback<BitFileInfo> | Callback for when a file upload is about to start. | |
| OnUploadComplete | EventCallback<BitFileInfo> | Callback for when a file upload is done. | |
| OnUploadFailed | EventCallback<BitFileInfo> | Callback for when an upload file is failed. | |
| PauseIcon | BitIconInfo? | null | The icon to use for the pause upload button using custom CSS classes for external icon libraries. Takes precedence over PauseIconName when both are set. |
| PauseIconName | string? | null | The name of the icon to use for the pause upload button from the built-in Fluent UI icons. Defaults to Pause when not set. |
| RemoveIcon | BitIconInfo? | null | The icon to use for the remove file button using custom CSS classes for external icon libraries. Takes precedence over RemoveIconName when both are set. |
| RemoveIconName | string? | null | The name of the icon to use for the remove file button from the built-in Fluent UI icons. Defaults to Delete when not set. |
| RemoveRequestHttpHeaders | Dictionary<string, string>? | null | Custom http headers for remove request. |
| RemoveRequestHttpHeadersProvider | Func<Task<Dictionary<string, string>>>? | null | The provider function to create the http headers for remove request. |
| RemoveRequestQueryStrings | Dictionary<string, string>? | null | Custom query strings for remove request. |
| RemoveRequestQueryStringsProvider | Func<Task<Dictionary<string, string>>>? | null | The provider function to create the query strings for remove request. |
| RemoveUrl | string? | null | URL of the server endpoint removing the files. |
| ShowRemoveButton | bool | false | URL of the server endpoint removing the files. |
| SuccessfulUploadMessage | string | File upload successful | The message shown for successful file uploads. |
| UploadIcon | BitIconInfo? | null | The icon to use for the upload button using custom CSS classes for external icon libraries. Takes precedence over UploadIconName when both are set. |
| UploadIconName | string? | null | The name of the icon to use for the upload button from the built-in Fluent UI icons. Defaults to Play when not set. |
| UploadRequestHttpHeaders | Dictionary<string, string>? | null | Custom http headers for upload request. |
| UploadRequestHttpHeadersProvider | Func<Task<Dictionary<string, string>>>? | null | The provider function to create the http headers for upload request. |
| UploadRequestQueryStrings | Dictionary<string, string>? | null | Custom query strings for upload request. |
| UploadRequestQueryStringsProvider | Func<Task<Dictionary<string, string>>>? | null | The provider function to create the query strings for upload request. |
| UploadUrl | string? | null | URL of the server endpoint receiving the files. |
| UploadUrlProvider | Func<Task<string?>>? | null | The provider function to create the URL of the server endpoint receiving the files. |
BitFileUpload public members
| Name | Type | Default value | Description |
|---|---|---|---|
| Files | IReadOnlyList<BitFileInfo>? | null | A list of all of the selected files to upload. |
| UploadStatus | BitFileUploadStatus | The current status of the file uploader. | |
| InputId | string? | The id of the file input element. | |
| IsRemoving | bool | false | Indicates that the file upload is in the middle of removing a file. |
| Upload | (BitFileInfo? fileInfo = null, string? uploadUrl = null) => Task | Starts uploading the file(s). | |
| PauseUpload | (BitFileInfo? fileInfo = null) => void | Pauses the upload. | |
| CancelUpload | (BitFileInfo? fileInfo = null) => void | Cancels the upload. | |
| RemoveFile | (BitFileInfo? fileInfo = null) => void | Removes a file by calling the RemoveUrl if the file upload is already started. | |
| Browse | Task | Opens a file selection dialog. | |
| Reset | Task | Resets the file upload. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitFileInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| ContentType | String | string.Empty | The Content-Type of the selected file. |
| Name | String | string.Empty | The name of the selected file. |
| Size | long | The size of the selected file. | |
| FileId | String | string.Empty | The file ID of the selected file, this is a GUID. |
| Index | int | The index of the selected file. | |
| LastChunkUploadedSize | long | The size of the last uploaded chunk of the file. | |
| TotalUploadedSize | long | The total uploaded size of the file. | |
| Message | string? | null | The error message is issued during file validation before uploading the file or at the time of uploading. |
| Status | BitFileUploadStatus | Pending | The status of the file in the BitFileUpload. |
| HttpHeaders | Dictionary<string, string>? | null | The HTTP header at upload file. |
BitFileUploadStatus enum
| Name | Value | Description |
|---|---|---|
| Pending | 0 | File uploading progress is pended because the server cannot be contacted. |
| InProgress | 1 | File uploading is in progress. |
| Paused | 2 | File uploading progress is paused by the user. |
| Canceled | 3 | File uploading progress is canceled by the user. |
| Completed | 4 | The file is successfully uploaded. |
| Failed | 5 | The file has a problem and progress is failed. |
| Removed | 6 | The uploaded file removed by the user. |
| RemoveFailed | 7 | The file removal failed. |
| NotAllowed | 8 | The type of uploaded file is not allowed. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page