I'm new to Radzen components, so bare with me.
Trying to use the Upload component but it's not working for me.
I want the user to upload multiple files (not necessarily all at once using Multiple=true). That is, they add one file, and then another, and another etc.
The files are to be saved on the server automatically upon upload, or when the user is clicking the "button" to upload the files.
I've tried different approaches, the one below is my latest attempt.
Perhaps there is a better approach, please let me know.
@page "/mu"
@using Radzen
@using Radzen.Blazor
@using System
@using System.IO
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Mvc
@using Microsoft.AspNetCore.Hosting
<RadzenUpload Url="upload/multipleNew"
Multiple="false"
@ref=myUploader
Progress=@OnProgress
Complete=@OnComplete
Auto="true"
ChooseText="Choose Files"
UploadText="Upload Selected"
Style="margin-bottom: 10px;" />
<RadzenButton Text="Upload All" Click="TriggerUpload" Style="margin-top: 10px;" />
<h3>Uploaded Files</h3>
<ul>
@foreach (var file in uploadedFiles)
{
<li>@file.Name (@file.Size / 1024) KB</li>
}
</ul>
@code {
[DisableRequestSizeLimit]
public partial class UploadController : Controller
{
private readonly IWebHostEnvironment environment;
public UploadController(IWebHostEnvironment environment)
{
this.environment = environment;
}
// Multiple files upload
[HttpPost("upload/multipleNew")]
public IActionResult Multiple(IFormFile[] files)
{
try
{
**//files variable is always null here**
return StatusCode(200);
}
catch (Exception ex)
{
return StatusCode(500, ex.Message);
}
}
}
private RadzenUpload myUploader;
private List<UploadFileInfo> uploadedFiles = new();
private async Task OnProgress(UploadProgressArgs args)
{
**//args.Files contains my file**
foreach (var file in args.Files)
{
Console.WriteLine($"Uploading: {file.Name} - {args.Progress}%");
}
}
private async Task OnComplete(UploadCompleteEventArgs args)
{
var json = args.JsonResponse; **//is null**
var raw = args.RawResponse; **//is empty**
if (args.Files != null)
{
foreach (var file in args.File)
{
uploadedFiles.Add(new UploadFileInfo
{
Name = file.Name,
Size = file.Size
});
}
}
}
private void TriggerUpload()
{
// RadzenUpload handles upload internally when Auto="false" and triggered manually
var uploader = myUploader; //this.FindComponent<RadzenUpload>();
uploader.Upload();
}
public class UploadFileInfo
{
public string Name { get; set; }
public long Size { get; set; }
}
}