Blazor InputFile doesn't notice user cancellation

Describe the bug

I have an InputFile component and upload a file with it. The event OnChange gets raised fine. Now I click again on the browse button to change my uploaded document(s) and click on cancel. The component says nothing is selected now but the event doesn’t raise again. So how should I detect that the user has deleted his/her upload?

To Reproduce

Consider the following code which writes the file to an Directory called Uploads.

<InputFile OnChange="OnInputFileChange" class="form-control" accept="application/pdf" />
@code 
{
	private async Task OnInputFileChange(InputFileChangeEventArgs e)
	{
		string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Uploads");
		string filename = Path.Combine(path, e.File.Name);

		if (!Directory.Exists(path))
		{
			Directory.CreateDirectory(path);
		}

		byte[] buffer = new byte[e.File.Size];
		await e.File.OpenReadStream().ReadAsync(buffer);

		await File.WriteAllBytesAsync(filename, buffer);
	}
}

Without detection for deletion I am not able to do validation. Consider my model for the input has a string which stores the path to the uploaded file which is being set within this method. So the user clicks on the button again and cancels the operation. Because a cancel i snot recognized, I would still have my string in my model set to the file, the user has uploaded before. In addtion this results in unnesscary files on the server, which could have been easily removed if there was any way to detect user cancellation.

Further technical details

• ASP.NET Core version 5.0.2
• VS Studio 2019 - 16.8.4 .NET SDK (gemäß “global.json”): Version: 5.0.200-preview.20601.7 Commit: b3b934bbf2

Laufzeitumgebung: OS Name: Windows OS Version: 10.0.19042 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\5.0.200-preview.20601.7\

Host (useful for support): Version: 5.0.2 Commit: cb5f173b96

.NET SDKs installed: 3.1.400-preview-015203 [C:\Program Files\dotnet\sdk] 5.0.100-rc.1.20452.10 [C:\Program Files\dotnet\sdk] 5.0.100 [C:\Program Files\dotnet\sdk] 5.0.102 [C:\Program Files\dotnet\sdk] 5.0.200-preview.20601.7 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0-rc.1.20451.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0-rc.1.20451.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0-rc.1.20452.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs: https://aka.ms/dotnet-download

[georgehemmings]

The cancellation isn’t detected as a change because Blazor is clearing the input’s value when it’s clicked. By registering your own click handler you can clean up your own state (the path or reference to the IBrowserFile object). I’ve found by adding a @key to the InputFile you can force the UI to create a new input element, which resolved the issue raised in #34040.

https://blazorrepl.telerik.com/mPFPYxvG34GY8AcP03

<div>
    <InputFile @key="uploadedCount" OnChange="@FileChange" @onclick="FileClick" />
</div>

<button @onclick="Upload" disabled="@(selectedFile == null)">Upload</button>

<p>@message</p>

@code {

    private int uploadedCount = 0;
    private string message;

    public void Upload()
    {
        if (selectedFile == null)
            return;

        // Upload selectedFile

        message = $"{selectedFile.Name} uploaded!";

        selectedFile = null;
        uploadedCount++;
    }

    IBrowserFile selectedFile;

    private void FileClick()
    {
        selectedFile = null;
    }

    private void FileChange(InputFileChangeEventArgs e)
    {
        selectedFile = e.File;
    }
}

[msftbot[bot]]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.