FileReaderSample.razor

@page "/FileReaderSample"
@using System.Text
@implements IAsyncDisposable

@inject IJSRuntime JSRuntime
@inject HttpClient HttpClient

<PageTitle>FileAPI - FileReader</PageTitle>

<h2>Using the FileReader to load an image in different ways.</h2>
In this sample we download an image using the <code>HttpClient</code> and create a new <code>Blob</code> from that.
We then use the methods of the <code>FileReader</code> interface to read the <code>Blob</code> in different ways and convert those different results to an image.
<br />
<div class="m-1">
    <button class="btn btn-primary" @onclick=ReadAsArrayBufferAsync>Read as byte array</button>
    <button class="btn btn-primary" @onclick=ReadAsArrayBufferInProcessAsync>Read as byte array InProcess</button>
    <button class="btn btn-primary" @onclick=ReadAsBinaryStringAsync>Read as binary string</button>
    <button class="btn btn-primary" @onclick=ReadAsText>Read as text</button>
    <button class="btn btn-primary" @onclick=ReadAsDataURLAsync>Read as data URL</button>
</div>
<textarea @bind=@log style="height:30vh;width:100%;">
</textarea>
<br />
<img src="@imageUrl" style="max-width:100%; max-height:30vh;" />

@code {
    string log = "";
    private string imageUrl = "";
    private Blob? blob;

    protected override async Task OnInitializedAsync()
    {
        var imageBytes = await HttpClient.GetByteArrayAsync($"images/mountain.jpg");
        blob = await Blob.CreateAsync(
            JSRuntime,
            blobParts: new BlobPart[] { imageBytes },
            options: new() { Type = "image/png" }
        );
    }

    private void GetProgress(ProgressEventInProcess eventArgs)
    {
        var time = eventArgs.TimeStamp;
        var progress = eventArgs.LengthComputable ? $"({eventArgs.Loaded}/{eventArgs.Total})" : "";
        log += $"{time:F2} - {eventArgs.Type}: {progress}\n";
        StateHasChanged();
    }

    private async Task GetProgressAsync(ProgressEvent eventArgs)
    {
        var time = await eventArgs.GetTimeStampAsync();
        var type = await eventArgs.GetTypeAsync();
        var progress = await eventArgs.GetLengthComputableAsync() ? $"({await eventArgs.GetLoadedAsync()}/{await eventArgs.GetTotalAsync()})" : "";
        log += $"{time:F2} - {type}: {progress}\n";
        StateHasChanged();
    }

    public async Task ReadAsArrayBufferAsync()
    {
        log = "";
        await using var fileReader = await FileReader.CreateAsync(JSRuntime);

        await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
        await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
        {
            imageUrl = "data:image/png;base64," + Convert.ToBase64String(await fileReader.GetResultAsByteArrayAsync() ?? new byte[0]);
            await GetProgressAsync(e);
        });

        await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
        await fileReader.AddOnProgressEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEventListenerAsync(eventListener);
        await fileReader.AddOnAbortEventListenerAsync(eventListener);
        await fileReader.AddOnErrorEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);

        await fileReader.ReadAsArrayBufferAsync(blob!);
    }

    public async Task ReadAsArrayBufferInProcessAsync()
    {
        log = "";
        await using var fileReader = await FileReaderInProcess.CreateAsync(JSRuntime);

        await using var eventListener = await EventListenerInProcess<ProgressEventInProcess, ProgressEvent>.CreateAsync(JSRuntime, e =>
        {
            if (e.Type == "loadend")
            {
                imageUrl = "data:image/png;base64," + Convert.ToBase64String(fileReader.ResultAsByteArray ?? new byte[0]);
            }
            GetProgress(e);
        });

        fileReader.AddOnLoadStartEventListener(eventListener);
        fileReader.AddOnProgressEventListener(eventListener);
        fileReader.AddOnLoadEventListener(eventListener);
        fileReader.AddOnAbortEventListener(eventListener);
        fileReader.AddOnErrorEventListener(eventListener);
        fileReader.AddOnLoadEndEventListener(eventListener);

        fileReader.ReadAsArrayBuffer(blob!);
    }

    public async Task ReadAsBinaryStringAsync()
    {
        log = "";
        await using var fileReader = await FileReader.CreateAsync(JSRuntime);

        await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
        await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
        {
            var bytes = (await fileReader.GetResultAsStringAsync() ?? "").Select(c => (byte)c).ToArray();
            imageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
            await GetProgressAsync(e);
        });

        await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
        await fileReader.AddOnProgressEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEventListenerAsync(eventListener);
        await fileReader.AddOnAbortEventListenerAsync(eventListener);
        await fileReader.AddOnErrorEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);

        await fileReader.ReadAsBinaryStringAsync(blob!);
    }

    public void ReadAsText()
    {
        log = "We can't read an image as text. ;)";
        imageUrl = "";
        StateHasChanged();
    }

    public async Task ReadAsDataURLAsync()
    {
        log = "";
        await using var fileReader = await FileReader.CreateAsync(JSRuntime);

        await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
        await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
        {
            imageUrl = await fileReader.GetResultAsStringAsync() ?? "";
            await GetProgressAsync(e);
        });

        await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
        await fileReader.AddOnProgressEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEventListenerAsync(eventListener);
        await fileReader.AddOnAbortEventListenerAsync(eventListener);
        await fileReader.AddOnErrorEventListenerAsync(eventListener);
        await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);

        await fileReader.ReadAsDataURLAsync(blob!);
    }

    public async ValueTask DisposeAsync()
    {
        if (blob is not null)
        {
            await blob.DisposeAsync();
        }
    }
}