Blazor.FileSystemAccess download - Blazor.FileSystemAccess kode sumber kode

Blazor.FileSystemAccess

Sumber daya lainnya

1.0.0

Unduh

Perkenalan

Pembungkus Blazor untuk akses sistem file API browser

API memungkinkan untuk membaca dan menulis ke sistem file lokal Anda dari browser baik file dan direktori.

Penafian: API didukung pada serangkaian browser terbatas. Paling terlihat tidak didukung di Firefox, Chrome untuk Android, dan browser seluler iOS.

Demo

Proyek sampel dapat didemonstrasikan di https://kristofferstrube.github.io/blazor.filesystemaccess/

Pada setiap halaman Anda dapat menemukan kode yang sesuai untuk contoh di sudut kanan atas.

Pada halaman utama Anda dapat melihat apakah API memiliki setidaknya dukungan minimal di browser yang digunakan.

Pada halaman status Anda dapat melihat berapa banyak spesifikasi webidl yang telah dibahas oleh pembungkus ini.

Memulai

Prasyarat

Anda perlu menginstal .NET 7.0 atau lebih baru untuk menggunakan pustaka.

Unduh .NET 7

Instalasi

Anda dapat menginstal paket melalui NUGET dengan Paket Manajer di IDE Anda atau sebagai alternatif menggunakan baris perintah:

dotnet add package KristofferStrube.Blazor.FileSystemAccess

Penggunaan

Paket ini dapat digunakan dalam proyek WebAssembly dan Blazor Server Blazor. (Perhatikan bahwa streaming file besar tidak didukung di Blazor Server karena masalah bandwidth.)

Impor

Anda juga perlu merujuk paket untuk menggunakannya di halaman Anda. Ini dapat dilakukan di _Import.razor dengan menambahkan yang berikut.

 @ using KristofferStrube . Blazor . FileSystemAccess

Tambahkan ke Koleksi Layanan

Cara mudah untuk membuat layanan tersedia di semua halaman Anda adalah dengan mendaftarkannya di IServiceCollection sehingga dapat disuntikkan ketergantungan di halaman yang membutuhkannya. Ini dilakukan di Program.cs dengan menambahkan yang berikut sebelum Anda membangun host dan menjalankannya.

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

Suntikan di halaman

Kemudian layanan dapat disuntikkan di halaman seperti itu:

 @inject IFileSystemAccessService FileSystemAccessService ;

Maka Anda dapat menggunakan IFileSystemAccessService untuk membuka salah satu dari tiga dialog yang tersedia di API FilesystemAccess seperti ini:

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

Masalah

Jangan ragu untuk membuka masalah di repositori jika Anda menemukan kesalahan dengan paket atau memiliki keinginan untuk fitur.

Masalah yang diketahui adalah bahwa menggunakan aliran untuk melakukan streaming data dalam jumlah besar di server Blazor tidak didukung.

Repositori terkait

Proyek ini menggunakan paket blazor.filesystem untuk mengembalikan file yang kaya FileSystemHandle S keduanya FileSystemFileHande dan FileSystemDirectoryHandle s.