Blazor WebAssembly - Read images larger than 500kb

Within my blazor webassembly i have an image upload which i convert to base64 to display to the user back like this:

protected async Task HandleFileSelection(InputFileChangeEventArgs e)    {        var file = e.GetMultipleFiles().FirstOrDefault();        if (file != null)        {            var buffer = new byte[file.Size];            await using (var stream = file.OpenReadStream())            {                var readAsync = await stream.ReadAsync(buffer, 0, buffer.Length);            }            UploadedImgBase64 = Convert.ToBase64String(buffer);            TypeOfUploadedImg = file.ContentType.Split('/')[1];            ImageSource = $"data:image/{TypeOfUploadedImg};base64,{UploadedImgBase64}";        }        StateHasChanged();    }

This works only with tiny images. How would I do this with larger images for example with a max of 10mb as im going to upload them in a blob storage in azure and that can handle large images. but right now i get an error of

Uncaught (in promise) Error: System.IO.IOException: Supplied file with size 3437206 bytes exceeds the maximum of 512000 bytes.

Is there any way of displaying the uploaded image back to the user before sending it to azure without turning it into a base 64 string? As browsers don't let you have access to the file path so I cant just make the src of the image the file path.

Edit:Would I upload it to Azure first and get the link? I thought of that but it sounds kinda stupid as what if the user cancels. Then i have over written their previous image.How do bigger companies display large images when I upload them before clicking save?