Blazor InputFile reset/clear value - statehaschanged() not working

Question

I have a component using an Blazor InputFile component as a sub-component.

When I select a file the OnChange handler is called as expected. However, if I select the same file twice the OnChange handler is not called again (which I guess is as intended since the selection did not change, however my use case needs this).

So, I figure if I can select a file and get a call to the OnChange handler and in the OnChange handler "reset" the selected file, then I should get a new call to the handler even if the same file is selected again.

I cant figure out how to reset the file selection in InputFile (sub)component. Calling this.StateHasChanged() in the handler doesn't cause the InputFile component to re-render.

Is this possible to do without JSInterop and manually setting the value-field of the DOM input element to "" (would that even work)?

My component:

@using stuff;

<div class="drag-drop-area">
    Drag and drop file here
    <InputFile OnChange="@OnInputFileChange"></InputFile>
</div>

@code {

    [Parameter]
    public String SomeParam { get; set; } = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e) {
        // do stuff with file

        // do _something_ here to reset InputFile

        this.StateHasChanged(); //<-- this doesn't cause InputFile re-render
    }

My attempts to do this so far includes:

Following various tips/tricks related to this. StateHasChanged(), i.e.
- await Task.Delay(1);
- await InvokeAsync(StateHasChanged);
Adding values to InputFile using AdditionalAttributes.Add(..) to see if that could force a re-render
Looked at dynamically adding the InputFile component using RenderFragment, but I cant pass the OnChanged param (handler) when creating a new instance of InputFile in code, which means I wont the a callback with InputFileChangeEventArgs
Looked at wrapping the InputFile in a EditForm to reset the form (Blazor EditForms apparently doesnt have reset functionality?)
[EDIT] Used both Task and void for OnInputFileChange

score 17 · Answer 1 · answered Jan 27 '22 at 10:39

Instead of calling StateHasChanged twice you can add a @key to the InputFile and change that when processing the OnChange event:

<InputFile @key=@(_inputFileId) OnChange="@LoadFiles" multiple />

@code {
    private string _inputFileId = Guid.NewGuid().ToString();
    
    private Task LoadFiles(InputFileChangeEventArgs e)
    {
        // load file here

        // the InputFile maintains the file the user has chosen and will ignore importing same file, i.e. you can't import the same file more than once to the inputfile control
        // to fix this the InputFile component key is changed so that blazor sees it as a new component and re-creates it in the browser DOM thereby clearing its state (and the file property of it)
        _inputFileId = Guid.NewGuid().ToString();

        return Task.CompletedTask;
    }

}```

This works because changing the value for `@key` will force the generation of a _new_ html element. — Bouke, Oct 07 '22 at 07:43

score 3 · Accepted Answer · edited Mar 09 '22 at 08:28

3

Still not a very nice solution - but a bit more concise and it works:

Wrap the InputFile inside a boolean to temporarily hide/show. This clears the value.

@if (!bClearInputFile)
{
    <InputFile class="form-control-file" OnChange="@OnInputFileChange" />
}

@code
{
    //Call ClearInputFile whenever value must be cleared.
    private void ClearInputFile()
    {
        bClearInputFile = true;
        StateHasChanged();
        bClearInputFile = false;
        StateHasChanged();
    }
}

edited Mar 09 '22 at 08:28

Sebastian

1,109
4
17
33

answered Sep 07 '21 at 15:30

Daniël J.M. Hoffman

1,539
10
16

1

Yeah, that's what I do sometimes. It's a little course, but it's simple and it works. – Bennyboy1973 Sep 07 '21 at 15:53
I swear this used to work. Doesn't work anymore. Not sure what has changed, but now it does not clear the text. – Kennetic Aug 05 '22 at 10:36
Well noted. I am using it in a few projects Blazor Server, .NET 6, and still works for me, but I'll be sure to comment here if I run into issues in future – Daniël J.M. Hoffman Aug 08 '22 at 11:38
Bad idea; you now depend on blazor removing/adding the html element, which it might or might not do depending on timing (you need to take network interruptions into account). – Bouke Oct 07 '22 at 07:42

score 2 · Answer 3 · answered Jun 09 '21 at 18:44

A little late to the party but I ran into a similar problem as the the OP with a slightly different use case. But either way the solution seems to be straight forward and would probably work. Just use some old fashioned javascript. So to reset the input element in the OnChange method, it would look like this:

    [Inject]
    private IJSRuntime _js { get; set; }
    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        IBrowserFile file = e.File;
        if (!ValidateFile(file))
        {
            //clearInput is the name of the javascript function
            //ref-upload is the id given to the InputFile element
            await _js.InvokeVoidAsync("clearInput", "ref-upload");
            return;
        }

    }

Then drop the following javascript function somewhere on your site like site.js:

function clearInput(inputId) {
    setTimeout(function () {
        var input = document.querySelector("#" + inputId);
        if (input) {
            input.value = "";
        }
    }, 30);
}

score 1 · Answer 4 · answered Dec 21 '22 at 05:28

Below is common and easy solution. Razor Component

<InputFile @key=@(inputFileId) disabled="@DisabledUpload" OnChange="@OnInputFileChange"/>

Added @key

Code section

public Guid inputFileId = Guid.NewGuid();

// Once upload success in OnInputFileChange, Change id so that blazor re-renders InputFile as new component

inputFileId = Guid.NewGuid();

score -1 · Answer 5 · edited Mar 11 '22 at 21:31

Try using a conditional statement and render identical content under both conditions. Changing the conditional should force an update.

@if (@reviewMechanism == "IMPORT")
{
    <div>
        <u>Import</u>
        <br />
        <br />
        <div>
            <div class="btn  btn-sm" style="background-color: lightgray; margin-bottom: 5px; width: 250px; margin-left: 0px ">
                <span>
                    <button class="btn  btn-sm" style=" font: smaller; border: solid; border-color: gray; border-width: thin;  background-color: rgba(239, 239, 239, 1.00);  margin-left: 0px"
                            @onclick="DownloadTemplate">
                        Download
                    </button>
                    ReviewTemplate.csv
                </span>
            </div>
            <br />
            <div class="btn  btn-sm" style="font: smaller;  margin-bottom: 5px;  width: 250px ; background-color: lightgray;height: 40px">
                <InputFile OnChange="@LoadFiles" style=" margin-left: 10px"> Pick a File </InputFile>
            </div>
        </div>
    </div>
}
else if (@reviewMechanism == "IMPORT2")
{
    <div>
        <u>Import</u>
        <br />
        <br />
        <div>
            <div class="btn  btn-sm" style="background-color: lightgray; margin-bottom: 5px; width: 250px; margin-left: 0px ">
                <span>
                    <button class="btn  btn-sm" style=" font: smaller; border: solid; border-color: gray; border-width: thin;  background-color: rgba(239, 239, 239, 1.00);  margin-left: 0px"
                            @onclick="DownloadTemplate">
                        Download
                    </button>
                    ReviewTemplate.csv
                </span>
            </div>
            <br />
            <div class="btn  btn-sm" style="font: smaller;  margin-bottom: 5px;  width: 250px ; background-color: lightgray;height: 40px">
                <InputFile OnChange="@LoadFiles" style=" margin-left: 10px"> Pick a File </InputFile>
            </div>
        </div>
    </div>
}

When change desired:

loadedFiles = new Dictionary<IBrowserFile, string>();

if (reviewMechanism == "IMPORT")
{
    reviewMechanism = "IMPORT2"; //force render
}
else
{
    if (reviewMechanism == "IMPORT2") reviewMechanism = "IMPORT"; //force render
}

Blazor InputFile reset/clear value - statehaschanged() not working

5 Answers5