Blazor library exposing read-only file streams in Blazor
using <input type="file" />
and FileReader. Drag and drop targets may also be used to initialize streams.
Here is a Live demo that contains the output of the wasm demo project. Currently, its a build based on v1.3.0.
Use Nuget: Install-Package Tewr.Blazor.FileReader
Make sure your environment is up to date with the appropriate SDK and VS2019 16.4. See this article for more details. Depending on your project type, use one of the two examples below. For a complete use-case, see the client or server-side demo projects.
Setup IoC for IFileReaderServiceas in (Program.cs):
services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);Setup IoC for IFileReaderService as in the example (Startup.cs):
services.AddFileReaderService();Read this for versions 0.12-0.16
using Microsoft.AspNetCore.Http.Features;
// (...)
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// Temporary workaround for https://github.com/aspnet/AspNetCore/issues/13470
app.Use(async (context, next) =>
{
context.Features.Get<IHttpMaxRequestBodySizeFeature>().MaxRequestBodySize = null;
await next.Invoke();
});
// (...)For server-side hosting, bufferSize + metadata (up to ~30%, depending on buffersize) should not exceed the SignalR MaximumReceiveMessageSize setting, or you will encounter a client-side exception if the file is larger than bufferSize.
Make sure MaximumReceiveMessageSize exceeds your bufferSize with 30% to be on the safe side. It is also recommended to set a fixed upper file size in the input tag or validate file.Size in code before starting the uploading. The default settings is 32KB. Thus, if you leave this setting untouched, you should not use a buffer size exceeding 22KB.
You can set the MaximumReceiveMessageSize like this in Startup.cs (creds @ADefWebserver for mentioning this). Microsoft Docs
services.AddServerSideBlazor().AddHubOptions(o =>
{
o.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
});
The IFileReference.CreateMemoryStreamAsync() method (without any argument) is basically the same as calling IFileReference.CreateMemoryStreamAsync(bufferSize: file.Size).
Calling IFileReference.CreateMemoryStreamAsync() may thus be unsuitable for large files (at least for client-side Blazor as the UI will be blocked during the transfer).
The code for views looks the same for both client- and server-side projects. The demo projects also contains a drag and drop example. While the demo projects are the reference, examples also exist in the wiki.
@page "/MyPage"
@using System.IO;
@inject IFileReaderService fileReaderService;
<input type="file" @ref=inputTypeFileElement /><button @onclick=ReadFile>Read file</button>
@functions {
public async Task ReadFile()
{
foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync())
{
// Read into buffer and act (uses less memory)
await using (Stream stream = await file.OpenReadAsync()) {
// Do (async) stuff with stream...
await stream.ReadAsync(buffer, ...);
// The following will fail. Only async read is allowed.
stream.Read(buffer, ...)
}
// Read into memory and act
using (MemoryStream memoryStream = await file.CreateMemoryStreamAsync(4096)) {
// Sync calls are ok once file is in memory
memoryStream.Read(buffer, ...)
}
}
}
}Version 1.5.0.20093 reverts a dependency to latest stable version of Microsoft.AspNetCore.Components (5.0.0-preview.1.20124.5 -> 3.1.3)
Version 1.5.0.20092 adds compatibility with Blazor 3.2 (CSB / Wasm) preview 3. Package now depends on latest version of Microsoft.AspNetCore.Components (3.0.0 -> 5.0.0-preview.1.20124.5)
Version 1.4.0.20072
adds compatibility with Blazor 3.2 (CSB / Wasm) preview 2. Also Adds support for the IAsyncDisposable interface.