File Upload keeps showing 'No File Chosen'

Question

I have a simple file upload which uses the BlazorInputFile. I can add a file and it hits the onChange function I have specified however the name of the file never appears on the screen and when I go to submit the form, it says that it's empty.

The form:

       <EditForm Model="@Item" OnValidSubmit="@SubmitForm">
            <DataAnnotationsValidator />
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>File</label>
                            <InputFile OnChange="LoadFile"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
            </div>
            <ValidationSummary />
        </EditForm>

@code {
public FormItem Item = new FormItem();

private IFileListEntry UploadedFile;

// So on change it gets in here and I can see that we have a item uploaded
private async Task LoadFile(IFileListEntry[] files)
{
    if (files.Count() != 0)
    {
        UploadedFile = files.FirstOrDefault();
    }

    this.StateHasChanged();
}

protected async Task SubmitForm(EditContext editContext)
{

}
}

The Item class has one attribute:

    [Required]
    public IFileListEntry File { get; set; }

I have seen that this may be an issue with the BlazorInputFile component itself but I was wondering if anyone else has come across this issue?

Currently running Blazor with ASP.Net Core 3.1

Answer 1

So. Looks like this is a bug that was added in the last update of the component.

To work around this issue I set the CSS of the file to white and added the file name below the button in the LoadFile function that is called. It's a hacky way but atm I don't see any other way around it until the component has been updated/ fixed.

CSS:

input[type='file'] {
    color: transparent;
}

Global variable in the component:

private string FileName = "";

The change in the LoadFile function:

FileName = string.Concat("File: ",files.FirstOrDefault().Name);

Answer 2

I think the issue came from the project version as this document said blazor InputFile applies to version 5 but yours is 3.1