ASP.NET Core Blazor file uploads

Last Updated on July 18, 2023

ASP.NET Core’s Blazor provides a modern, component-based architecture for developing interactive web applications. One of its powerful features is handling file uploads with minimal fuss. This blog post will walk you through the process of setting up file uploads in your Blazor application, ensuring your journey in creating a feature-rich, user-friendly app remains smooth.

Introduction to File Uploads in Blazor

Blazor makes it a breeze to accept file uploads, providing an intuitive approach to handle user interaction. At the heart of this feature is the <InputFile> component, an integral part of Blazor’s component library.

The syntax for utilizing this component is straightforward. You can use the OnChange attribute to specify an event callback, which will be triggered when the user selects a file. To allow multiple file selections, simply add the multiple attribute as shown below:

<InputFile OnChange="@LoadFiles" multiple />

Next, let’s dive into the LoadFiles method, which is invoked when the user selects a file (or files) to upload.

@code {
    private void LoadFiles(InputFileChangeEventArgs e)
    {
        ...
    }
}

InputFileChangeEventArgs gives you access to the selected files. You can then manipulate the file data according to your needs.

Handling File Streams

One common requirement during file uploads is to write the uploaded file data to disk. The Blazor framework provides a convenient method, OpenReadStream(), that returns a Stream. This stream can then be copied to a FileStream to write the data to disk.

Here is a sample code snippet for this:

await using FileStream fs = new(path, FileMode.Create);
await browserFile.OpenReadStream().CopyToAsync(fs);

In this snippet, path is the destination path where the file will be stored, and browserFile is an instance of IBrowserFile representing the uploaded file.

Integration with Azure Blob Storage

If you are using Azure Blob Storage for storing files, Blazor’s integration with Azure makes it easy to upload the file directly. Here’s how you can do this:

await blobContainerClient.UploadBlobAsync(
    trustedFileName, browserFile.OpenReadStream());

blobContainerClient is an instance of BlobContainerClient representing the Azure Blob Storage container, and trustedFileName is the name under which the file will be stored.

Limiting File Sizes

Sometimes, you may want to limit the size of the files that the users can upload. Blazor provides a neat way to do this. You can use the maxAllowedSize parameter in the OpenReadStream method:

// accept a file upto 307200 bytes (300kb) of size
await myFile.OpenReadStream(maxAllowedSize: 1024 * 300).ReadAsync(buffers);

This code will allow only files of size up to 300 KB to be uploaded. If a user tries to upload a larger file, an exception will be thrown.

Wrapping Up

The ability to handle file uploads effectively and efficiently is a key aspect of many web applications. ASP.NET Core Blazor simplifies this process with its robust, developer-friendly components and methods, making file uploads not only functional but also a cinch to implement. Whether you are writing files to disk or using Azure Blob Storage for handling your uploads, Blazor has got you covered. Happy coding!