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.
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.
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. |
| 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). |
| ChunkedUpload | bool | false | Enables the chunked upload. |
| ChunkSize | long? | null | The size of each chunk of file upload in bytes. |
| Multiple | bool | false | Enables multi-file selection. |
| 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. |
| 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. | |
| RemoveRequestHttpHeaders | IReadOnlyDictionary<string, string> | new Dictionary<string, string>() | Custom http headers for remove request. |
| RemoveRequestQueryStrings | IReadOnlyDictionary<string, string> | new Dictionary<string, string>() | Custom 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. |
| FailedUploadMessage | string | File upload failed | The message shown for failed file uploads. |
| FailedRemoveMessage | string | File remove failed | The message shown for failed file removes. |
| UploadRequestHttpHeaders | IReadOnlyDictionary<string, string> | new Dictionary<string, string>() | Custom http headers for upload request. |
| UploadRequestQueryStrings | IReadOnlyDictionary<string, string> | new Dictionary<string, string>() | Custom query strings for upload request. |
| UploadUrl | string? | null | 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 | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
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 | IReadOnlyDictionary<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. |
- On this page