Blazor .net 8 Identity - Add profile Pic

[Kroplewski-M]

Hi, Within Blazor web app. I have scaffolded identity and added a few custom properties. First name, last name and profile pic. The first name and last name work but profile pic doesn't. Every time i upload the form and click the register button the input field clears and i get validation errors and i don't know why. I tried setting @bind-value to InputFile but that didnt work and i am now trying to do this:
<InputFile OnChange="@HandleFileSelection" class="form-control" aria-required="true" /> however, when debugging the function never runs so the onChange never gets ran.
Does anyone know how i can upload files to the Identity Register page on Blazor.

[DavidThielen]

You have not provided enough information to give you a specific answer. And I do not use <InpitFile> (I use DxUpload). But my guess is the problem you're facing is somewhere/somehow it is not uploading the file. If there's no upload, there's no OnChange.

[woodconn]

Answer Source: https://stackoverflow.com/a/78889706/7354452

Ok so get ready for a crash course. Long story short, Blazor on Server-Mode with .NET 8 wants to render things in a static SSR (Server-Side Rendering) mode, not the fabled Interactive SSR mode. This causes the SignalR stuff to be non-existent, which explains why you can't simply preview an image as shown on Radzen live examples:

https://blazor.radzen.com/fileinput?theme=material3

Can't we just switch over?

Yes actually, BUT there are a few gotchas to take care of.

The static SSR allows that Cascading Parameter of HttpContext, but the Interactive version can't use that, it'll be null, your webpage will error out, and you'll have no clue how to fix it.

Turns out it can be fixed, in the Program.cs in the root of the project, you can add builder.Services.AddHttpContextAccessor(); which allows you to inject it in pages you want to become Interactive.

@inject IHttpContextAccessor HttpContextAccessor
@rendermode InteractiveServer

I found I needed to apply it to the files:

BlazorServerNET8\Components\Account\Pages\Manage\Index.razor
BlazorServerNET8\Components\Account\Shared\StatusMessage.razor

And you can grab it via something like:

if (HttpContext is null)
{
    HttpContext = HttpContextAccessor.HttpContext!;
}

Then you are able to use the File Uploading Components such as RadzenFileInput and it will trigger the Change EventCallback where the first parameter is a base64 encoded string of the picture.

For added bonus to work with files bigger than 100kb...

//For Files

builder.Services.AddServerSideBlazor().AddHubOptions(o =>
{
    o.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10 MB
});