{"id":26280089,"url":"https://github.com/kristofferstrube/blazor.filesystem","last_synced_at":"2025-05-07T03:04:34.060Z","repository":{"id":64996776,"uuid":"580527479","full_name":"KristofferStrube/Blazor.FileSystem","owner":"KristofferStrube","description":"A Blazor wrapper for the File System browser API.","archived":false,"fork":false,"pushed_at":"2024-08-04T10:03:16.000Z","size":15090,"stargazers_count":31,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T03:04:27.528Z","etag":null,"topics":["blazor","blazor-jsinterop","blazor-webassembly","csharp","editor","file-system","file-system-api","filesystem","filesystemapi","github-pages","jsinterop","wasm","webassembly","wrapper"],"latest_commit_sha":null,"homepage":"https://kristofferstrube.github.io/Blazor.FileSystem/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KristofferStrube.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-20T19:35:57.000Z","updated_at":"2025-04-22T19:22:11.000Z","dependencies_parsed_at":"2023-02-13T03:15:50.633Z","dependency_job_id":"b490fb29-d756-4430-9333-161519ea7ad7","html_url":"https://github.com/KristofferStrube/Blazor.FileSystem","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.FileSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.FileSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.FileSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.FileSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KristofferStrube","download_url":"https://codeload.github.com/KristofferStrube/Blazor.FileSystem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252804206,"owners_count":21806769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-jsinterop","blazor-webassembly","csharp","editor","file-system","file-system-api","filesystem","filesystemapi","github-pages","jsinterop","wasm","webassembly","wrapper"],"created_at":"2025-03-14T14:18:38.597Z","updated_at":"2025-05-07T03:04:34.036Z","avatar_url":"https://github.com/KristofferStrube.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE.md)\n[![GitHub issues](https://img.shields.io/github/issues/KristofferStrube/Blazor.FileSystem)](https://github.com/KristofferStrube/Blazor.FileSystem/issues)\n[![GitHub forks](https://img.shields.io/github/forks/KristofferStrube/Blazor.FileSystem)](https://github.com/KristofferStrube/Blazor.FileSystem/network/members)\n[![GitHub stars](https://img.shields.io/github/stars/KristofferStrube/Blazor.FileSystem)](https://github.com/KristofferStrube/Blazor.FileSystem/stargazers)\n[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/KristofferStrube.Blazor.FileSystem?label=NuGet%20Downloads)](https://www.nuget.org/packages/KristofferStrube.Blazor.FileSystem/)\n\n# Introduction\nA Blazor wrapper for the [File System](https://fs.spec.whatwg.org/) browser API.\n\nThe API standardizes ways to handle files and directories. It also enables access to the **origin private file system** which is a virtual sandboxed file system. This project implements a wrapper around the API for Blazor so that we can easily and safely interact with it from Blazor.\n\n# Demo\nThe sample project can be demoed at https://kristofferstrube.github.io/Blazor.FileSystem/\n\nOn each page you can find the corresponding code for the example in the top right corner.\n\nOn the [API Coverage Status](https://kristofferstrube.github.io/Blazor.FileSystem/Status) you can see how much of the WebIDL specs this wrapper has covered.\n\n# Getting Started\n## Prerequisites\nYou need to install .NET 7.0 or newer to use the library.\n\n[Download .NET 7](https://dotnet.microsoft.com/download/dotnet/7.0)\n\n## Installation\nYou can install the package via Nuget with the Package Manager in your IDE or alternatively using the command line:\n```bash\ndotnet add package KristofferStrube.Blazor.FileSystem\n```\n\n# Usage\nThe 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.)\n## Import\nYou need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.\n```razor\n@using KristofferStrube.Blazor.FileSystem\n```\n## Add to service collection\nThe library has one service which is the `IStorageManagerService` which can be used to get access to the **origin private file system**. 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.\n```csharp\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\nbuilder.RootComponents.Add\u003cApp\u003e(\"#app\");\nbuilder.RootComponents.Add\u003cHeadOutlet\u003e(\"head::after\");\n\n// Other services are added.\n\nbuilder.Services.AddStorageManagerService();\n\nawait builder.Build().RunAsync();\n```\n## Inject in page\nThen the service can be injected in a page like so:\n```razor\n@inject IStorageManagerService StorageManagerService;\n```\nThen you can use `IStorageManagerService` to get a directory handle for the **origin private file system** and read/create a file in it like this:\n```razor\n\u003cbutton @onclick=\"OpenAndReadFile\"\u003eOpen Single File and Read\u003c/button\u003e\n\n@code {\n    private async Task OpenAndReadFile()\n    {\n        FileSystemDirectoryHandle directoryHandle = await StorageManagerService.GetOriginPrivateDirectoryAsync();\n        FileSystemFileHandle fileHandle = await directoryHandle.GetFileHandleAsync(\"file.txt\", new() { Create = true });\n        FileAPI.File file = await fileHandle.GetFileAsync();\n        // Do something with the file.\n    }\n}\n```\n\nThe counterpart to getting a `File` via the `GetFileAsync()` method is getting a `FileSystemWritableFileStream` via the `CreateWritableAsync()` method which can be used to write to the file referenced with the `FileSystemFileHandle` like this:\n```csharp\nFileSystemFileHandle fileHandle; // Some file handle\nFileSystemWritableFileStream writable = await fileHandle.CreateWritableAsync();\nawait writable.WriteAsync(\"some text\");\nawait writable.CloseAsync();\n```\nYou need to close the `FileSystemWritableFileStream` to commit the written text. You can either do so explicitly as seen above or you can use it in a using statement like this:\n```csharp\nFileSystemFileHandle fileHandle; // Some file handle\nawait using FileSystemWritableFileStream writable = await fileHandle.CreateWritableAsync();\nawait writable.WriteAsync(new byte[] { 0, 1, 2, 3, 4, 5 });\n```\nThis will automatically await the close when you get to the end of the current scope.\n\n# Issues\nFeel free to open issues on the repository if you find any errors with the package or have wishes for features.\n\n# Related repositories\nThis project uses the *Blazor.FileAPI* package to return a rich `File` from the `GetFileAsync` method on a `FileSystemFileHandle` and when writing a `Blob` to a `FileSystemWritableFileSystem`.\n- https://github.com/KristofferStrube/Blazor.FileAPI\n\nThis project is used in the *Blazor.FileSystemAccess* package as a basis for the file handles that it uses in its methods and extends on.\n- https://github.com/KristofferStrube/Blazor.FileSystemAccess\n\n# Related articles\nThis repository was build with inspiration and help from the following series of articles:\n\n- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)\n- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)\n- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)\n- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)\n- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.filesystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofferstrube%2Fblazor.filesystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.filesystem/lists"}