IBrowserFile FromIMageFileAsync incomplete image

Question

I'm uploading images to my app and I'm using this code:

    public static async Task<string> GetThumbnailAndImage(InputFileChangeEventArgs e)
    {
        var file = e.File;

        var imageTmp = await file.RequestImageFileAsync("jpg", 200, 200);

        return image = await UploadMedia(imageTmp);
    }

    public static async Task<string> UploadMedia(IBrowserFile file)
    {
        byte[] bytes = new byte[file.Size];

        var stream = file.OpenReadStream(int.MaxValue);

        await stream.ReadAsync(bytes);

        return Convert.ToBase64String(bytes);
    }

The problem here is, depending on the pixels I ask, the image is partialy uploaded, for example:

I'm expecting the left image but getting the right image.. Does anyone knows what might be causing this problem?

Bests

Answer 1

@TLP answer solves the problem, but it can still be improved if we follow Microsoft security recommendations to not read files into memory while uploading: https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=server

So the correct way to approach this issue is to store the file in a temp file and after converting it to a byte array you close the file stream and delete the tmp file:

    public static async Task<string> UploadMedia(IBrowserFile file)
    {
        var path = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString());

        await using var fs = new FileStream(path, FileMode.Create);

        await file.OpenReadStream(file.Size).CopyToAsync(fs);

        var bytes = new byte[file.Size];

        fs.Position = 0;

        await fs.ReadAsync(bytes);            

        fs.Close();

        File.Delete(path);

        return Convert.ToBase64String(bytes);
    }