Demos About Radzen
Search Results for

    Show / Hide Table of Contents

    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.

    Introducing Radzen Blazor Studio

    Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

    Learn More

    Download Now
    Download Now
    In This Article
    Back to top Radzen Blazor Components, © 2018-2023 Radzen. Source Code licensed under MIT