InputFile in Blazor SSR

[Markz878]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When submitting a form file in Blazor SSR (no interactivity), it seems that it requires the Enchance attribute on the EditForm.
Why is that, and should this be documented somewhere?
And is it possible to use InputFile component for this, only regular seems to work?

Expected Behavior

I would expect that the EditForm with file submit works without the Enchance attribute,
and that I could use InputFile component in a Blazor SSR page.

I would also expect this documentation to be updated for these scenarios:
https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0

Steps To Reproduce

Create a new Blazor 8 SSR project (no interactivity) and put this code on Home page:

@page "/"

<PageTitle>Home</PageTitle>

<EditForm method="post" Model="NewCustomer" OnValidSubmit="SubmitForm" FormName="customer">
    <input type="file" name="NewCustomer.File" />
    <button>Submit</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    public Customer? NewCustomer { get; set; }

    protected override void OnInitialized()
    {
        NewCustomer ??= new();
    }

    public async Task SubmitForm()
    {
        ArgumentNullException.ThrowIfNull(NewCustomer?.File);
        using FileStream fileStream = File.OpenWrite(NewCustomer.File.Name);
        using Stream submittedFileStream = NewCustomer.File.OpenReadStream();
        await submittedFileStream.CopyToAsync(fileStream);
    }

    public class Customer
    {
        public IFormFile? File { get; set; }
    }
}

The submit fails saying that the 'NewCustomer?.File' is null.
Adding the Enchance attribute makes this work.

Exceptions (if any)

No response

.NET Version

8.0.100-rc.2.23502.2

Anything else?

No response

[javiercn]

@Markz878 thanks for contacting us.

Unfortunately, the InputFile is a bit special in the way it works, so for SSR purposes is best to use the input element directly and provide a name that matches the expected path in your model.

You need to set the enctype on the form for the files to be sent to the server.

[Markz878]

@javiercn Yeah, if I replace the Enhance parameter with enctype="multipart/form-data" it works.
And then it also works without javascript.
Maybe this could be documented somewhere?
Thanks for the help!

[mammadkoma]

I answered here :
https://stackoverflow.com/questions/77801550/how-to-upload-a-file-in-blazor-ssr-net-8?noredirect=1#comment137157594_77801550