A file upload component with progress tracking, multiple file support, and drag-and-drop capability. RadzenUpload provides a full-featured file upload interface with automatic or manual upload, server communication, and comprehensive event handling. Handles file selection and upload to a server endpoint with automatic upload on file selection or manual triggering via Upload() method, real-time upload progress with percentage and bytes loaded, file type restriction via Accept property (MIME types or extensions), custom authentication or HTTP headers, Complete/Error/Progress/Change events for tracking upload lifecycle, automatic image preview for image files, file removal support, and built-in drag-and-drop for file selection. Uploads files to the URL endpoint via HTTP POST multipart/form-data. Server-side endpoint must accept file uploads and return appropriate responses.
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenUpload : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRenderBasic upload with auto-upload:
<RadzenUpload Url="api/upload" Change=@OnChange Complete=@OnComplete />
@code {
void OnChange(UploadChangeEventArgs args)
=> Console.WriteLine($"Selected {args.Files?.Count() ?? 0} files");
void OnComplete(UploadCompleteEventArgs args)
=> Console.WriteLine(args.Cancelled ? "Upload cancelled" : "Upload complete");
}
Manual upload with progress tracking:
<RadzenUpload @ref=upload Url="api/upload" Auto="false" Multiple="true" Progress=@OnProgress />
<RadzenButton Text="Upload" Click=@(() => upload.Upload()) />
@code {
RadzenUpload upload;
void OnProgress(UploadProgressArgs args)
{
Console.WriteLine($"Progress: {args.Progress}% ({args.Loaded}/{args.Total} bytes)");
}
}
Upload with file type filtering:
<RadzenUpload Url="api/upload/images" Accept="image/*" MaxFileSize="5000000" />A file upload component with progress tracking, multiple file support, and drag-and-drop capability. RadzenUpload provides a full-featured file upload interface with automatic or manual upload, server communication, and comprehensive event handling. Handles file selection and upload to a server endpoint with automatic upload on file selection or manual triggering via Upload() method, real-time upload progress with percentage and bytes loaded, file type restriction via Accept property (MIME types or extensions), custom authentication or HTTP headers, Complete/Error/Progress/Change events for tracking upload lifecycle, automatic image preview for image files, file removal support, and built-in drag-and-drop for file selection. Uploads files to the URL endpoint via HTTP POST multipart/form-data. Server-side endpoint must accept file uploads and return appropriate responses.
public RadzenUpload()Gets or sets the accepted MIME types.
public string Accept { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the accepted MIME types. |
Gets or sets a value indicating whether this RadzenUpload upload is automatic.
public bool Auto { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether this RadzenUpload upload is automatic. |
Gets or sets the change callback.
public EventCallback<UploadChangeEventArgs> Change { get; set; }
| Type | Description |
|---|---|
| EventCallback<UploadChangeEventArgs> | Gets or sets the change callback. |
Gets or sets the child content.
public RenderFragment ChildContent { get; set; }
| Type | Description |
|---|---|
| RenderFragment | Gets or sets the child content. |
Gets or sets the choose button text.
public string ChooseText { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the choose button text. |
Gets or sets the complete callback.
public EventCallback<UploadCompleteEventArgs> Complete { get; set; }
| Type | Description |
|---|---|
| EventCallback<UploadCompleteEventArgs> | Gets or sets the complete callback. |
Gets or sets the choose button text.
public string DeleteText { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the choose button text. |
Gets or sets a value indicating whether this RadzenUpload is disabled.
public bool Disabled { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether this RadzenUpload is disabled. |
Gets or sets the error callback.
public EventCallback<UploadErrorEventArgs> Error { get; set; }
| Type | Description |
|---|---|
| EventCallback<UploadErrorEventArgs> | Gets or sets the error callback. |
Gets a value indicating whether this instance has value.
public bool HasValue { get; }
| Type | Description |
|---|---|
| bool | Gets a value indicating whether this instance has value. |
Gets or sets the icon.
public string Icon { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the icon. |
Gets or sets the icon color.
public string IconColor { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the icon color. |
Gets or sets the text.
public string ImageAlternateText { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the text. |
Specifies additional custom attributes that will be rendered by the input.
public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
| Type | Description |
|---|---|
| IReadOnlyDictionary<string, object> | Specifies additional custom attributes that will be rendered by the input. |
Gets or sets the maximum number of files.
public int MaxFileCount { get; set; }
| Type | Description |
|---|---|
| int | Gets or sets the maximum number of files. |
Specifies the HTTP method used for uploading files to the defined Url endpoint. Common values are POST (default) and PUT. If the parameter is not set, this property is ignored. Defaults to POST.
public string Method { get; set; }
| Type | Description |
|---|---|
| string | Specifies the HTTP method used for uploading files to the defined Url endpoint. Common values are POST (default) and PUT. If the parameter is not set, this property is ignored. Defaults to POST. |
Gets or sets a value indicating whether this RadzenUpload is multiple.
public bool Multiple { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether this RadzenUpload is multiple. |
Gets or sets the name.
public string Name { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the name. |
Gets or sets the parameter name. If not set 'file' parameter name will be used for single file and 'files' for multiple files.
public string ParameterName { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the parameter name. If not set 'file' parameter name will be used for single file and 'files' for multiple files. |
Gets or sets the progress callback.
public EventCallback<UploadProgressArgs> Progress { get; set; }
| Type | Description |
|---|---|
| EventCallback<UploadProgressArgs> | Gets or sets the progress callback. |
Enables streaming upload mode for large files to the specified Url. When true, files are uploaded as raw binary streams instead of multipart/form-data. Only a single file can be uploaded at a time in streaming mode. When false (default), files are uploaded as multipart/form-data (standard form upload), and multiple files can be uploaded simultaneously if is enabled. This property is ignored if is not set.
public bool Stream { get; set; }
| Type | Description |
|---|---|
| bool | Enables streaming upload mode for large files to the specified Url. When true, files are uploaded as raw binary streams instead of multipart/form-data. Only a single file can be uploaded at a time in streaming mode. When false (default), files are uploaded as multipart/form-data (standard form upload), and multiple files can be uploaded simultaneously if is enabled. This property is ignored if is not set. |
Gets or sets the URL.
public string Url { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the URL. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
Clear selected file(s) from the upload selection
public Task ClearFiles()
| Type | Description |
|---|---|
| Task |
Creates the upload change event args.
public UploadChangeEventArgs CreateUploadChangeEventArgs(IEnumerable<FileInfo> files)
| Type | Name | Description |
|---|---|---|
| IEnumerable<FileInfo> | files |
| Type | Description |
|---|---|
| UploadChangeEventArgs |
protected override string GetComponentCssClass()
| Type | Description |
|---|---|
| string |
Gets the headers.
public IDictionary<string, string> GetHeaders()
| Type | Description |
|---|---|
| IDictionary<string, string> | IDictionary<System.String, System.String>. |
protected override Task OnAfterRenderAsync(bool firstRender)
| Type | Name | Description |
|---|---|---|
| bool | firstRender |
| Type | Description |
|---|---|
| Task |
Called on file change.
public Task OnChange(IEnumerable<PreviewFileInfo> files)
| Type | Name | Description |
|---|---|---|
| IEnumerable<PreviewFileInfo> | files | The files. |
| Type | Description |
|---|---|
| Task |
Called when upload is complete.
public Task OnComplete(string response, bool cancelled)
| Type | Name | Description |
|---|---|---|
| string | response | The response. |
| bool | cancelled | Flag indicating if the upload was cancelled |
| Type | Description |
|---|---|
| Task |
Called on upload error.
public Task OnError(string error)
| Type | Name | Description |
|---|---|---|
| string | error | The error. |
| Type | Description |
|---|---|
| Task |
Called on progress.
public Task<bool> OnProgress(int progress, long loaded, long total, IEnumerable<FileInfo> files, bool cancel)
| Type | Name | Description |
|---|---|---|
| int | progress | The progress. |
| long | loaded | The loaded. |
| long | total | The total. |
| IEnumerable<FileInfo> | files | The files. |
| bool | cancel | The cancelled state. |
| Type | Description |
|---|---|
| Task<bool> |
Called on file remove.
protected Task OnRemove(PreviewFileInfo file, bool fireChangeEvent)
| Type | Name | Description |
|---|---|---|
| PreviewFileInfo | file | The file. |
| bool | fireChangeEvent | If the linked Change event should be fired as a result of this removal (default: true) |
| Type | Description |
|---|---|
| Task |
Called on file remove.
public Task RemoveFile(string fileName, bool ignoreCase)
| Type | Name | Description |
|---|---|---|
| string | fileName | The name of the file to remove. |
| bool | ignoreCase | Specify true is file name casing should be ignored (default: false) |
| Type | Description |
|---|---|
| Task |
public override Task SetParametersAsync(ParameterView parameters)
| Type | Name | Description |
|---|---|---|
| ParameterView | parameters |
| Type | Description |
|---|---|
| Task |
Uploads this instance selected files.
public Task Upload()
| Type | Description |
|---|---|
| Task |