Upload an image with NET8 and Blazor in the user profile with Microsoft Identity

255 Views Asked by At

I'm creating a new website with Blazor and the NET8 framework using the boilerplate from Visual Studio 2022 Preview. The source code of this test is on GitHub.

I have already changed the ApplicationUser adding a new property called ProfilePicture defined as

public byte[]? ProfilePicture { get; set; }

Now, in the file Index.razor under Components > Pages > Account > Manage, I like to allow the users to upload an image for their profile. Also, I have another issue in this form that I explain in this post.

So, I added this code in the HTML part

<InputFile OnChange="LoadFiles" />

and then the code

private async Task LoadFiles(InputFileChangeEventArgs e)
{
    MemoryStream ms = new MemoryStream();
    await e.File.OpenReadStream().CopyToAsync(ms);
    var bytes = ms.ToArray();

    _user.ProfilePicture = bytes;
    await UserManager.UpdateAsync(_user);

    Input.ProfilePicture = bytes;
}

When I change an image to upload, the function LoadFiles is not fired at all. I tried to render a page as RenderModeInteractiveAuto but definitely this raises an error.

Update

I created a new Razor page for uploading the image (I removed the code it is not essential for the resulting error)

@using BlazorIdentity.Data
@using Microsoft.AspNetCore.Identity
@rendermode RenderMode.InteractiveServer
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject UserManager<ApplicationUser> UserManager

<InputFile OnChange="LoadFiles" />

@code {
    [Parameter] public ApplicationUser? User { get; set; } = default!;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        MemoryStream ms = new MemoryStream();
        await e.File.OpenReadStream().CopyToAsync(ms);
        var bytes = ms.ToArray();

        User.ProfilePicture = bytes;
        await UserManager.UpdateAsync(User);
    }
}

Now, the problem occurs when the application performs the UpdateSync. I got this error

System.InvalidOperationException: The instance of entity type 'ApplicationUser' cannot be tracked because another instance with the same key value for {'Id'} is already being tracked. When attaching existing entities, ensure that only one entity instance with a given key value is attached. Consider using 'DbContextOptionsBuilder.EnableSensitiveDataLogging' to see the conflicting key values.

I'm not changing the ID, I only change a value in the ApplicationUser.

Update/2

The pages for the Identity are the boilerplate from Visual Studio 2022 Preview. I added some new fields. But look at that.

enter image description here

Without changing anything, clicking on the menu to jump from one page to another, I get the error

A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.

0

There are 0 best solutions below