FileEdit not removing file names after reset()

[RomanJahn]

I would like to remove the names of the files in the FileEdit component after uploading the files.
I tried Reset() manually as demonstrated in the docs but that doesn't work.
I also recognized that AutoReset is set to TRUE before I call Reset(), even though I set it to FALSE in the FileEdit-tag, as shown in the docs-example. Binding to a property also has no effect - it's always true. Only if I set AutoReset to false (from outside the component, which is not recommended), the AutoReset-bool stays false as expected.

My main question is: Is there a way of removing the file names manually?

Btw, I mainly used the example code.

Kind Regards

[entuto]

Hello,

I have the same problem, I don't know how to delete the file name, since with Reset() it doesn't work.

@RomanJahn have you managed to fix it?

Thank you very much in advance.

[RomanJahn]

@entuto No unfortunately not. Waiting for any suggestions for myself ;-)

[stsrki]

Internally Reset() only calls javascrot to clear the input value, like this: element.value = '';

I don't see a reason why it won't work. Maybe you need to also notify Blazor of the change. In that case, just use StateHasChanhed() after the Reset()

[entuto]

In my code I already have StateHasChanged() right after Reset() but it doesn't work.

fileEdit.Reset();
StateHasChanged();

[RomanJahn]

That was one of the first things I tried but did not change behavior.

[gerfen]

I have the same issue. Fundamentally the problem is that the input's sibling label element is not getting cleared. I came up with this fairly horrible hack to work around the issue. I created this JavaScript method:

window.setFileInputLabel = (id, text) => {
    var elem = document.getElementById(id);
    if (elem) {
        const parent = elem.parentElement;
        const label = parent.querySelector('label');
        if (label) {
          label.textContent = text;
        }
    }
}

To clear the label I call the method like so:

 await JavaScriptRuntime.InvokeAsync<string>("setFileInputLabel", new object?[] { FileEditRef.ElementId, string.Empty });

And finally in my FileEdit.Changed handler I set the label like so:

public async Task OnFileChanged(FileChangedEventArgs e)
{
       var files = string.Join(",", e.Files.Select(f => f.Name));
       await JavaScriptRuntime.InvokeAsync<string>("setFileInputLabel", new object?[] { FileEditRef.ElementId, files });
      ... elided for clarity
}

It's not the most elegant solution but it works.

[entuto]

@gerfen thank you very much. It works!

[RomanJahn]

I have the same issue. Fundamentally the problem is that the input's sibling label element is not getting cleared. I came up with this fairly horrible hack to work around the issue. I created this JavaScript method:

window.setFileInputLabel = (id, text) => {
    var elem = document.getElementById(id);
    if (elem) {
        const parent = elem.parentElement;
        const label = parent.querySelector('label');
        if (label) {
          label.textContent = text;
        }
    }
}

To clear the label I call the method like so:

 await JavaScriptRuntime.InvokeAsync<string>("setFileInputLabel", new object?[] { FileEditRef.ElementId, string.Empty });

And finally in my FileEdit.Changed handler I set the label like so:

public async Task OnFileChanged(FileChangedEventArgs e)
{
       var files = string.Join(",", e.Files.Select(f => f.Name));
       await JavaScriptRuntime.InvokeAsync<string>("setFileInputLabel", new object?[] { FileEditRef.ElementId, files });
      ... elided for clarity
}

It's not the most elegant solution but it works.

Thanks a lot. Works.
Sorry for the delayed feedback!