Blazor.FileSystemAccess

Introduction

Un emballage de blazor pour l'accès au système de fichiers API du navigateur

L'API permet de lire et d'écrire dans votre système de fichiers local à partir du navigateur à la fois des fichiers et des répertoires.

Avertissement: L'API est prise en charge sur un ensemble limité de navigateurs. Les plus notables non pris en charge sur Firefox, Chrome pour Android et les navigateurs mobiles iOS.

Démo

L'exemple de projet peut être démo à https://kristofferstrube.github.io/blazor.filesystemaccess/

Sur chaque page, vous pouvez trouver le code correspondant pour l'exemple dans le coin supérieur droit.

Sur la page principale, vous pouvez voir si l'API a au moins un support minimal dans le navigateur utilisé.

Sur la page d'état, vous pouvez voir quelle part des spécifications WebIDL que ce wrapper a couvertes.

Commencer

Condition préalable

Vous devez installer .net 7.0 ou plus récent pour utiliser la bibliothèque.

Télécharger .net 7

Installation

Vous pouvez installer le package via Nuget avec le gestionnaire de packages dans votre IDE ou en utilisant alternativement la ligne de commande:

dotnet add package KristofferStrube.Blazor.FileSystemAccess

Usage

Le package peut être utilisé dans les projets Blazor WebAssembly et Blazor Server. (Notez que le streaming de gros fichiers n'est pas pris en charge dans Blazor Server en raison de problèmes de bande passante.)

Importer

Vous devez également référencer le package afin de l'utiliser dans vos pages. Cela peut être fait dans _Import.razor en ajoutant ce qui suit.

 @ using KristofferStrube . Blazor . FileSystemAccess 

Ajouter à la collection de services

Un moyen facile de rendre le service disponible dans toutes vos pages consiste à l'enregistrer dans l' IServiceCollection afin qu'il puisse être injecté de dépendance dans les pages qui en ont besoin. Cela se fait dans Program.cs en ajoutant ce qui suit avant de construire l'hôte et de l'exécuter.

 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 ( ) ; 

Injecter dans la page

Ensuite, le service peut être injecté dans une page comme ainsi:

 @inject IFileSystemAccessService FileSystemAccessService ;

Ensuite, vous pouvez utiliser IFileSystemAccessService pour ouvrir l'une des trois boîtes de dialogue disponibles dans l'API FileSystemAccess comme ceci:

< 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 ();
            }
        }
    }
}

Problèmes

N'hésitez pas à ouvrir des problèmes sur le référentiel si vous trouvez des erreurs avec le package ou si vous souhaitez des fonctionnalités.

Un problème connu est que l'utilisation de flux pour diffuser une grande quantité de données dans Blazor Server n'est pas pris en charge.

Référentiels connexes

FileSystemDirectoryHandle projet utilise le package Blazor.FileSystem pour renvoyer Rich FileSystemHandle FileSystemFileHande

• https://github.com/kristofferstrube/blazor.filesystem

Articles connexes

Ce référentiel a été construit avec inspiration et aide de la série d'articles suivants:

• Emballage des bibliothèques JavaScript dans Blazor WebAssembly / wasm
• Appelez les fonctions C # anonymes de JS dans Blazor Wasm
• Utiliser des références d'objets JS dans Blazor Wasm pour envelopper les bibliothèques JS
• Blazor WasM 404 Erreur et correction des pages GitHub
• Comment résoudre les problèmes de chemin de base de Blazor Wasm