Upload component
This article demonstrates how to use the Upload component.
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);
}
}
}
Warning
When uploading single file the argument name of the controller method should be file
, when uploading multiple the argument name should be files.