Upload (Blazor)
This article demonstrates how to use the Radzen Blazor Upload component. Check also the component guide and API reference.
Upload Properties
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘upload’ + index suffix | Unique name of the upload. |
| Url | string | null | Upload url. |
| Accept | string | null | Accepted files filter. |
| ChooseText | string | Choose | Choose button text. |
| Auto | boolean | true | Should upload start immediately. If set to false Upload() method can be used to start the upload. |
Upload Events
| Name | Type | Default | Description |
|---|---|---|---|
| Progress | event | null | Upload Loaded, Total bytes and Percent as argument. |
| Complete | event | null | Sever response as string (RawResponse) or JsonDocument (JsonResponse). |
| Error | event | null | Error message. |
Blazor declaration
Single file upload
<RadzenUpload Url="upload/single" Progress="@((args) => OnProgress(args, "Single file upload"))" />
Multiple files upload
<RadzenUpload Multiple="true" Url="upload/multiple" Progress="@((args) => OnProgress(args, "Multiple files upload"))" />
Upload images only
<RadzenUpload Multiple="true" Accept="image/*" Url="upload/multiple" Progress="@((args) => OnProgress(args, "Images only upload"))" />
Upload with additional parameter
<RadzenUpload Multiple="true" Accept="image/*" Url=@($"upload/{1}") Progress="@((args) => OnProgress(args, "Upload with additional parameter"))" />
@code {
int progress;
string info;
void OnProgress(UploadProgressArgs args, string name)
{
this.info = $"% '{name}' / {args.Loaded} of {args.Total} bytes.";
this.progress = args.Progress;
}
}
The upload component allows you to choose single or multiple files and will initiate immediately POST request to specified Url. You can filter file types using Accept property (for example images only: Accept="image/*").
Example upload controller implementation
public partial class UploadController : Controller
{
[HttpPost("upload/single")]
public IActionResult Single(IFormFile file)
{
try
{
// Put your code here
return StatusCode(200);
}
catch (Exception ex)
{
return StatusCode(500, ex.Message);
}
}
[HttpPost("upload/multiple")]
public IActionResult Multiple(IFormFile[] files)
{
try
{
// Put your code here
return StatusCode(200);
}
catch (Exception ex)
{
return StatusCode(500, ex.Message);
}
}
[HttpPost("upload/{id}")]
public IActionResult Post(IFormFile[] files, int id)
{
try
{
// Put your code here
return StatusCode(200);
}
catch (Exception ex)
{
return StatusCode(500, ex.Message);
}
}
}
Important: When uploading single file the argument name of the controller method should be
file, when uploading multiple the argument name should befiles.