Blazor.FileSystemAccess Download - Blazor.FileSystemAccess Source Code Download

Blazor.FileSystemAccess

Andere Ressourcen

1.0.0

Herunterladen

Einführung

Ein Blazor -Wrapper für den Zugriff auf den Browser -API -Dateisystem -System

Die API ermöglicht es, sowohl Dateien als auch Verzeichnisse aus dem Browser zu lesen und in Ihr lokales Dateisystem zu schreiben.

Haftungsausschluss: Die API wird auf einer begrenzten Reihe von Browsern unterstützt. Am auffälligsten, das nicht auf Firefox, Chrome für Android und iOS -mobile Browser unterstützt wird.

Demo

Das Beispielprojekt kann unter https://kristofferStube.github.io/blazor.filesystemAccess/ vorgebracht werden

Auf jeder Seite finden Sie den entsprechenden Code für das Beispiel in der oberen rechten Ecke.

Auf der Hauptseite können Sie sehen, ob die API im gebrauchten Browser mindestens minimal unterstützt wird.

Auf der Statusseite können Sie sehen, wie viel von den WebIDL -Spezifikationen diese Wrapper abgedeckt hat.

Erste Schritte

Voraussetzungen

Sie müssen .NET 7.0 oder neuer installieren, um die Bibliothek zu verwenden.

Download .net 7

Installation

Sie können das Paket über Nuget mit dem Paketmanager in Ihrer IDE installieren oder alternativ mit der Befehlszeile:

dotnet add package KristofferStrube.Blazor.FileSystemAccess

Verwendung

Das Paket kann in Blazor WebAssembly- und Blazor Server -Projekten verwendet werden. (Beachten Sie, dass das Streaming großer Dateien aufgrund von Bandbreitenproblemen in Blazor Server nicht unterstützt wird.)

Import

Sie müssen auch das Paket verweisen, um es auf Ihren Seiten zu verwenden. Dies kann in _Import.razor durchgeführt werden, indem die folgenden hinzugefügt werden.

 @ using KristofferStrube . Blazor . FileSystemAccess

Zur Servicesammlung hinzufügen

Eine einfache Möglichkeit, den Service auf allen Seiten verfügbar zu machen, besteht darin, ihn in der IServiceCollection zu registrieren, damit er in den Seiten, die sie benötigen, abhängig sein kann. Dies geschieht in Program.cs , indem Sie Folgendes hinzufügen, bevor Sie den Host erstellen und ausführen.

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

In die Seite injizieren

Dann kann der Dienst in einer Seite wie SO injiziert werden:

 @inject IFileSystemAccessService FileSystemAccessService ;

Anschließend können Sie mit IFileSystemAccessService einen der drei in der Dateisystem Access -API verfügbaren Dialoge wie folgt öffnen:

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