Upload

Upload component properties.

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.

Upload Events

Name Type Default Description
Progress event null Upload Loaded, Total bytes and Percent as argument.

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 be files.

We are here for you

Making our users happy is always a priority for us.