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

would it be possible for you to post a minimally reproducible example? I tried running your code sample but it does not compile. — Jason D, Sep 01 '21 at 14:23

score 0 · Answer 1 · answered Sep 02 '21 at 07:42

0

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

answered Sep 02 '21 at 07:42

Tiny Wang

10,423
1
11
29

I've got it working by removing the `required` decorator but the file upload still says `No File Chosen`..but at least it reaches the submitForm function now. Looking around it seems to be an issue with the BlazorInputFile component. Until it's updated, I might have to find a hacky way around it – JamesS Sep 02 '21 at 12:09
Thanks for your response sir : ) but I haven't got any progress on this case now. Sorry for not helping you. – Tiny Wang Sep 03 '21 at 01:22

score 0 · Accepted Answer · answered Sep 03 '21 at 10:25

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);

File Upload keeps showing 'No File Chosen'

2 Answers2