Skip to content

Blazor WASM InputFile OnChange doesnt invoke when input file is no longer selected #49148

@Kazbek

Description

@Kazbek

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

InputFile component in Blazor WASM doenst notify app when input file is no longer selected.

<div>
    <EditForm Model="@Model" OnValidSubmit="HandleSubmit">
        <InputFile OnChange="@LoadFile" required/>
        <div>
            File1 is null: @(Model.File1 == null)
        </div>
        <div>
            File1 name: @Model.File1?.Name
        </div>
        <div>
            File1 size: @Model.File1?.Size
        </div>

        <button type="submit">submit</button>
    </EditForm>
    <div>@SubmitResult</div>
</div>

@code{
    private string SubmitResult = string.Empty;
    private EditModel Model { get; set; } = new();

    private void LoadFile(InputFileChangeEventArgs e)
    {
        Model.File1 = e.File;
    }

    private void HandleSubmit()
    {
        SubmitResult = $"Ok at {DateTime.Now} / {Guid.NewGuid()}";
    }

    private class EditModel
    {
        public IBrowserFile? File1 { get; set; }
    }
}

Expected Behavior

InputFile invoke OnChange when user clear input.

Steps To Reproduce

Demo on github (link to razor page)

  1. Click on file input.
  2. Select file. OnChange will be invoked.
  3. Click on file input.
  4. Click "Cancel" on file selection window. File input will be cleared but OnChange will not invoke. So app still think that file is selected.

To ensure that file input is cleared I added a required attribute on InputFile and browser no longer allow me to submit form due to not file selected.

Exceptions (if any)

No response

.NET Version

7.0.304

Anything else?

Browser: Google Chrome 114.0.5735.199 x64
Microsoft.AspNetCore.Components.WebAssembly version 7.0.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    ✔️ Resolution: AnsweredResolved because the question asked by the original author has been answered.ExternalThis is an issue in a component not contained in this repository. It is open for tracking purposes.Status: Resolvedarea-blazorIncludes: Blazor, Razor ComponentsblockedThe work on this issue is blocked due to some dependencybugThis issue describes a behavior which is not expected - a bug.

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions