KristofferStrube.Blazor.FileAPI 0.3.0

.NET 7.0
dotnet add package KristofferStrube.Blazor.FileAPI --version 0.3.0
NuGet\Install-Package KristofferStrube.Blazor.FileAPI -Version 0.3.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="KristofferStrube.Blazor.FileAPI" Version="0.3.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add KristofferStrube.Blazor.FileAPI --version 0.3.0
#r "nuget: KristofferStrube.Blazor.FileAPI, 0.3.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install KristofferStrube.Blazor.FileAPI as a Cake Addin
#addin nuget:?package=KristofferStrube.Blazor.FileAPI&version=0.3.0

// Install KristofferStrube.Blazor.FileAPI as a Cake Tool
#tool nuget:?package=KristofferStrube.Blazor.FileAPI&version=0.3.0

License: MIT GitHub issues GitHub forks GitHub stars

NuGet Downloads (official NuGet)


A Blazor wrapper for the browser File API

The API provides a standard for representing file objects in the browser and ways to select them and access their data. One of the most used interfaces that is at the core of this API is the Blob interface. This project implements a wrapper around the API for Blazor so that we can easily and safely interact with files in the browser.


The sample project can be demoed at

On each page you can find the corresponding code for the example in the top right corner.

On the API Coverage Status page you can get an overview over what parts of the API we support currently.

Getting Started


You need to install .NET 6.0 or newer to use the library.

Download .NET 6


You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:

dotnet add package KristofferStrube.Blazor.FileAPI


The package can be used in Blazor WebAssembly and Blazor Server projects.


You also need to reference the package in order to use it in your pages. This can be done in _Import.razor by adding the following.

@using KristofferStrube.Blazor.FileAPI

Creating wrapper instances

Most of this library is wrapper classes which can be instantiated from your code using the static Create and CreateAsync methods on the wrapper classes. An example could be to create an instance of a Blob that contains the text "Hello World!" and gets its Size and Type, read it as a ReadableStream, read as text directly, and slice it into a new Blob like this.

Blob blob = await Blob.CreateAsync(
    blobParts: new BlobPart[] {
        "Hello ",
        new byte[] { 0X57, 0X6f, 0X72, 0X6c, 0X64, 0X21 }
    options: new() { Type = "text/plain" }
ulong size = await blob.GetSizeAsync(); // 12
string type = await blob.GetTypeAsync(); // "text/plain"
ReadableStream stream = await blob.StreamAsync();
string text = await blob.TextAsync(); // "Hello World!"
Blob worldBlob = await blob.SliceAsync(6, 11); // Blob containing "World"

All creator methods take an IJSRuntime instance as the first parameter. The above sample will work in both Blazor Server and Blazor WebAssembly. If we only want to work with Blazor WebAssembly we can use the InProcess variant of the wrapper class. This is equivalent to the relationship between IJSRuntime and IJSInProcessRuntime. We can recreate the above sample using the BlobInProcess which will simplify some of the methods we can call on the Blob and how we access attributes.

BlobInProcess blob = await BlobInProcess.CreateAsync(
    blobParts: new BlobPart[] {
        "Hello ",
        new byte[] { 0X57, 0X6f, 0X72, 0X6c, 0X64, 0X21 }
    options: new() { Type = "text/plain" }
ulong size = blob.Size; // 12
string type = blob.Type; // "text/plain"
ReadableStreamInProcess stream = await blob.StreamAsync();
string text = await blob.TextAsync(); // "Hello World!"
BlobInProcess worldBlob = blob.Slice(6, 11); // BlobInProcess containing "World"

Some of the methods wrap a Promise so even in the InProcess variant we need to await it like we see for TextAsync above.

If you have an IJSObjectReference or an IJSInProcessObjectReference for a type equivalent to one of the classes wrapped in this package then you can construct a wrapper for it using another set of overloads of the static Create and CreateAsync methods on the appropriate class. In the below example we create wrapper instances from existing JS references to a File object.

// Blazor Server compatible.
IJSObjectReference jSFile; // JS Reference from other package or your own JSInterop.
File file = File.Create(JSRuntime, jSFile);

// InProcess only supported in Blazor WebAssembly.
IJSInProcessObjectReference jSFileInProcess; // JS Reference from other package or your own JSInterop.
FileInProcess fileInProcess = await File.CreateAsync(JSRuntime, jSFileInProcess);

Add to service collection

We have a single service in this package that wraps the URL interface. An easy way to make the service available in all your pages is by registering it in the IServiceCollection so that it can be dependency injected in the pages that need it. This is done in Program.cs by adding the following before you build the host and run it.

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Other services are added.


await builder.Build().RunAsync();

Inject in page

Then the service can be injected in a page and be used to create Blob URLs and revoke them like so:

@implements IAsyncDisposable
@inject IURLService URL;

<img src="@blobURL" alt="Some blob as image" />

@code {
    private string blobURL = "";

    protected override async Task OnInitializedAsync()
        Blob blob; // We have some blob from somewhere.

        blobURL = await URL.CreateObjectURLAsync(blob);

    public async ValueTask DisposeAsync()
        await URL.RevokeObjectURLAsync(blobURL);

You can likewise add the InProcess variant of the service (IURLServiceInProcess) using the AddURLServiceInProcess extension method which is only supported in Blazor WebAssembly projects.


Feel free to open issues on the repository if you find any errors with the package or have wishes for features.

This project uses the Blazor.Streams package to return a rich ReadableStream from the StreamAsync method on a Blob.

This project is used in the Blazor.FileSystem package to return a rich File object when getting the File from a FileSystemFileHandle and when writing a Blob to a FileSystemWritableFileSystem.

This repository was build with inspiration and help from the following series of articles:

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed. 
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on KristofferStrube.Blazor.FileAPI:

Package Downloads

File System API wrapper implementation for Blazor.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.3.0 1,852 3/16/2023
0.2.0 2,781 11/18/2022
0.1.1 529 11/10/2022
0.1.0 247 11/8/2022