- bit BlazorUI
Home Docs

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 FileUpload
Files can be uploaded automatically after selecting them.
Auto & Multiple
Multiple files can be selected to upload automatically.
MaxSize
Multiple files can be selected to upload automatically with limited size.
AllowedExtensions
Single or multiple file uploading limited only by file extensions, which in this case the allowed file extensions include gif, jpg and mp4.
Removable
Single or multiple file uploading with remove functionality enabled.
Events
Multiple files can be selected to upload automatically with calling all upload complete event.
No File
Configuring http request
Multiple files can be selected to upload and remove with custom http headers and query strings.
Non-Chunked
Files can be uploaded automatically after selecting them.
Custom FileUpload
Use custom template for file upload.

Public API
Use a custom method for the open file selection dialog.

Implementation

BitFileUpload parameters
Name
Type
Default value
Description
Accept string? null The value of the accept attribute of the input element.
AllowedExtensions IReadOnlyCollection<string> new List<string> { "*" } Filters files by extension.
AutoChunkSizeEnabled bool false Calculate the chunk size dynamically based on the user's Internet speed between 512 KB and 10 MB.
AutoUploadEnabled bool false Automatically starts the upload file(s) process immediately after selecting the file(s).
ChunkedUploadEnabled bool true Enables or disables the chunked upload feature.
ChunkSize long? null The size of each chunk of file upload in bytes.
IsMultiSelect bool false Enables multi-file select & 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.
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.
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.
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.