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
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
Max file size: 2 MB
Supported file types: jpg, jpeg, png, bpm

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