Solved: BlazorInputFile ‘No File Chosen’ Error

Problem

Blazor is an exciting new technology for .NET developers that enables us to leverage our core strengths by writing most of the code in C# and minimising the need to write JavaScript code.

While working on a Blazor WebAssembly solution that used Steve Sanderson’s BlazorInputFile solution I came across an unusual issue where the “No File Chosen” text would not change and the selected filename did not appear even though a file had already been selected.

Hmmmm … what’s going on here?

Solution

After a bit of head scratching I decided to look more closely at the BlazorInputFile source code and eventually isolated the issue down to the following inputfile.js JavaScript code.

componentInstance.invokeMethodAsync('NotifyChange', fileList).then(function () {
    //reset file value ,otherwise, the same filename will not be trigger change event again
    elem.value = '';
}, function (err) {
    //reset file value ,otherwise, the same filename will not be trigger change event again
    elem.value = '';
    throw new Error(err);
});

I ended up applying the following code fix to the inputfile.js file in my local solution. Viola! the issue did not occur anymore after retesting it across multiple web browsers including Firefox, Chrome and Edge Chromium, it worked as expected.

componentInstance.invokeMethodAsync('NotifyChange', fileList).then(function () {
    //reset file value ,otherwise, the same filename will not be trigger change event again
    elem.value = elem.value + '_';
}, function (err) {
    //reset file value ,otherwise, the same filename will not be trigger change event again
    elem.value = elem.value + '_';
    throw new Error(err);
});

Final Thoughts

Well I hope the above fix has worked for you. If not, feel free to share any alternative solutions you have found in the comments below to help others out there.

Happy blazor-ing 🙂

• About
• Latest Posts

Shane Bartholomeusz

G’day, I’m a technical solutions consultant based in Perth, Australia that specialises in the Microsoft technology stack, including .NET, Dynamics 365, Azure and general web development etc.

This blog is my place to share my thoughts, helpful solutions and just random nerdy stuff.

Latest posts by Shane Bartholomeusz (see all)

• Solved: Build Errors Not Showning in VS 2022 - 21st November 2024
• How To: Configure VSCode to Trust Self-Signed Certs - 16th August 2024
• Solved: GitHub Actions – HTTP 403: Resource not accessible by integration - 13th June 2024