Description
A Blazor wrapper for the browser API File System Access
The API makes it possible to read and write to your local file system from the browser both files and directories.
Disclaimer: The API is supported on a limited set of browsers. Most noticeable not supported on Firefox, Chrome for Android, and iOS mobile browsers.
Blazor.FileSystemAccess alternatives and similar packages
Based on the "Blazor" category.
Alternatively, view Blazor.FileSystemAccess alternatives based on common mentions on social networks and blogs.
-
#<Sawyer::Resource:0x00007fb9e7c04ce0>
Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed. -
ant-design-blazor
🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly. -
Megabit.Blazorise
Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material. -
-
MASA.Blazor
Blazor UI component library based on Material Design. Support Blazor Server, Blazor WebAssembly and MAUI Blazor. -
blazork8s
manage k8s using c# blazor enhance by chatgpt ,try something new ！使用blazor技术开发的内置OpenAI GPT的k8s 管理界面 -
Blazor WASM Extension for the MVVM CommunityToolkit
Mvvm Blazor using CommunityToolkit.Mvvm with built-in Navigation by ViewModel support
InfluxDB - Power Real-Time Data Analytics at Scale
Do you think we are missing an alternative of Blazor.FileSystemAccess or a related project?
README
Introduction
A Blazor wrapper for the browser API File System Access
The API makes it possible to read and write to your local file system from the browser both files and directories.
Disclaimer: The API is supported on a limited set of browsers. Most noticeable not supported on Firefox, Chrome for Android, and iOS mobile browsers.
Demo
The sample project can be demoed at https://kristofferstrube.github.io/Blazor.FileSystemAccess/
On each page you can find the corresponding code for the example in the top right corner.
On the main page you can see if the API has at least minimal support in the used browser.
Getting Started
Prerequisites
You need to install .NET 6.0 or newer to use the library.
Installation
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.FileSystemAccess
Usage
The package can be used in Blazor WebAssembly and Blazor Server projects. (Note that streaming of big files is not supported in Blazor Server due to bandwidth problems.)
Import
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.FileSystemAccess
Add to service collection
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);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
// Other services are added.
builder.Services.AddFileSystemAccessService();
await builder.Build().RunAsync();
Inject in page
Then the service can be injected in a page like so:
@inject IFileSystemAccessService FileSystemAccessService;
Then you can use IFileSystemAccessService to open one of the three dialogs available in the FileSystemAccess API like this:
<button @onclick="OpenAndReadFile">Open File Picker for Single File and Read</button>
<br />
@Text
@code {
private string Text = "";
private async Task OpenAndReadFile()
{
FileSystemFileHandle? fileHandle = null;
try
{
OpenFilePickerOptionsStartInWellKnownDirectory options = new()
{
Multiple = false,
StartIn = WellKnownDirectory.Downloads
};
var fileHandles = await FileSystemAccessService.ShowOpenFilePickerAsync(options);
fileHandle = fileHandles.Single();
}
catch (JSException ex)
{
// Handle Exception or cancelation of File Access prompt
Console.WriteLine(ex);
}
finally
{
if (fileHandle is not null)
{
var file = await fileHandle.GetFileAsync();
Text = await file.TextAsync();
StateHasChanged();
}
}
}
}
Issues
Feel free to open issues on the repository if you find any errors with the package or have wishes for features.
A known issue is that using Streams to stream large amount of data in Blazor Server is not supported.
Related articles
This repository was build with inspiration and help from the following series of articles:
*Note that all licence references and agreements mentioned in the Blazor.FileSystemAccess README section above
are relevant to that project's source code only.