Blazor.FileSystemAccess ดาวน์โหลด - Blazor.FileSystemAccess ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

Blazor.FileSystemAccess

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

การแนะนำ

เสื้อคลุม blazor สำหรับการเข้าถึงระบบไฟล์ API เบราว์เซอร์

API ทำให้สามารถอ่านและเขียนลงในระบบไฟล์ในเครื่องของคุณจากเบราว์เซอร์ทั้งไฟล์และไดเรกทอรี

ข้อจำกัดความรับผิดชอบ: API ได้รับการสนับสนุนในชุดเบราว์เซอร์ที่ จำกัด ไม่ได้รับการสนับสนุนมากที่สุดที่ไม่รองรับในเบราว์เซอร์ Firefox, Chrome สำหรับ Android และ iOS Mobile Browsers

การสาธิต

โครงการตัวอย่างสามารถสาธิตได้ที่ https://kristofferstrube.github.io/blazor.filesystemaccess/

ในแต่ละหน้าคุณสามารถค้นหารหัสที่เกี่ยวข้องสำหรับตัวอย่างที่มุมขวาบน

ในหน้าหลักคุณสามารถดูว่า API มีการสนับสนุนอย่างน้อยที่สุดในเบราว์เซอร์ที่ใช้แล้วหรือไม่

ในหน้าสถานะคุณสามารถดูว่า Webidl specs wrapper นี้ครอบคลุมเท่าใด

เริ่มต้น

ข้อกำหนดเบื้องต้น

คุณต้องติดตั้ง. NET 7.0 หรือใหม่กว่าเพื่อใช้ห้องสมุด

ดาวน์โหลด. net 7

การติดตั้ง

คุณสามารถติดตั้งแพ็คเกจผ่าน Nuget ด้วยตัวจัดการแพ็คเกจใน IDE ของคุณหรือใช้บรรทัดคำสั่ง:

dotnet add package KristofferStrube.Blazor.FileSystemAccess

การใช้งาน

แพ็คเกจสามารถใช้ในโครงการ Blazor WebAssembly และ Blazor Server (โปรดทราบว่าการสตรีมของไฟล์ขนาดใหญ่ไม่ได้รับการสนับสนุนใน Blazor Server เนื่องจากปัญหาแบนด์วิดท์)

นำเข้า

คุณต้องอ้างอิงแพ็คเกจเพื่อใช้ในหน้าของคุณ สามารถทำได้ใน _Import.razor โดยการเพิ่มสิ่งต่อไปนี้

 @ using KristofferStrube . Blazor . FileSystemAccess

เพิ่มในคอลเลกชันบริการ

วิธีที่ง่ายในการให้บริการในทุกหน้าของคุณคือการลงทะเบียนใน IServiceCollection เพื่อให้สามารถฉีดพึ่งพาได้ในหน้าเว็บที่ต้องการ สิ่งนี้ทำใน Program.cs โดยการเพิ่มสิ่งต่อไปนี้ก่อนที่คุณจะสร้างโฮสต์และเรียกใช้

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

ฉีดเข้าไปในหน้า

จากนั้นบริการสามารถฉีดในหน้าเช่น SO:

 @inject IFileSystemAccessService FileSystemAccessService ;

จากนั้นคุณสามารถใช้ IFileSystemAccessService เพื่อเปิดหนึ่งในสามกล่องโต้ตอบที่มีอยู่ในไฟล์ API FileSystemaccess เช่นนี้:

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