ValueChange event fires for each file uploaded, but has no single file property?

[Aaron Smith]

According to the breaking changes below, the ValueChange event now fires for each file, rather than all files:

Essential Studio for Blazor 2023 volume 1 main Release Release Notes (syncfusion.com)

However, the UploadChangeEventArgs contains only a "Files" property, not a "File" property (the release notes implies it should now have a "File" property).

This means that if uploading multiple files, the event gets fired for each file, but the Files property gets larger on each iteration. E.g. When uploading 5 files, the ValueChange event fires 5 times, but Files property on UploadChangeEventArgs increases each time, from 1 through to 5. This is not noticeable when simply saving the files to a directory, as the files simply get overwritten. However, when sending those files to a service which treats them as unique, you notice it is creating duplicate files.

I worked around this issue by removing the file from the collection at the end of processing it, then it doesn't appear in the next hit.

I also had the problem of wanting to clear the UI list once all files had processed. Due to the mutli-firing of ValueChange I had to find another way of doing this. I used OnActionComplete however this seems to fire twice - once without files, then with files. I used this to clear the list.

Also, you should probably update the documentation to make it clear that file.Stream is now always null and that to get the files stream you have to use:

await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);

because it's not obvious, and is a significant breaking change!

Below is my code, might be useful for others:

@page "/"

@using Syncfusion.Blazor.Inputs
@using System.IO
@inject IJSRuntime JsRuntime


     <SfUploader @ref="fileUploader" AutoUpload="true" MaxFileSize="500000000">

                        <UploaderEvents ValueChange="OnUploadChanged" Success="OnUploadSuccess" OnActionComplete="OnActionComplete"></UploaderEvents>
       </SfUploader>

@code {


    private SfUploader uploderObj;


    public async Task OnUploadSuccess(SuccessEventArgs args)
    {
        await LogAsync($"Success: {args.File.Name}");
    }


    public async Task OnActionComplete(ActionCompleteEventArgs args)
    {
        await LogAsync($"OnActionComplete file count: {args.FileData.Count}");


        if(args.FileData.Count > 0)
        {
            await uploderObj.ClearAllAsync();
        }
    }


    public async Task OnUploadChanged(UploadChangeEventArgs args)
    {
        foreach (var file in args.Files)
        {
            await LogAsync($"OnUploadChanged: {file.File.Name}");
            var path = Path.GetFullPath("wwwroot\\uploads\\") + file.FileInfo.Name;
            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
            await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);
            filestream.Close();
        }


        //remove this file, or it will turn up the next time OnUploadChanged fires
        args.Files.Remove(args.Files.First());


    }


    public async Task LogAsync(string message)
    {
        await JsRuntime.InvokeVoidAsync("console.log", message);
    }


}