تنزيل Blazor.FileSystemAccess - Blazor.FileSystemAccess Code Code

Blazor.FileSystemAccess

موارد أخرى

1.0.0

تنزيل

مقدمة

غلاف Blazor للوصول إلى نظام ملفات API للمتصفح

تتيح واجهة برمجة التطبيقات القراءة والكتابة إلى نظام الملفات المحلي الخاص بك من المتصفح على حد سواء الملفات والأدلة.

إخلاء المسئولية: يتم دعم واجهة برمجة التطبيقات على مجموعة محدودة من المتصفحات. أبرزها غير مدعوم على متصفحات Firefox و Chrome for Android و iOS Mobile.

العرض التوضيحي

يمكن تجريب مشروع العينة على https://kristofferstrube.github.io/blazor.filesystemaccess/

في كل صفحة ، يمكنك العثور على الكود المقابل للمثال في الزاوية اليمنى العليا.

في الصفحة الرئيسية ، يمكنك معرفة ما إذا كان API لديه الحد الأدنى على الأقل في المتصفح المستخدم.

في صفحة الحالة ، يمكنك معرفة مقدار مواصفات WebIDL التي غطتها هذا الغلاف.

ابدء

المتطلبات الأساسية

تحتاج إلى تثبيت .NET 7.0 أو الأحدث لاستخدام المكتبة.

تنزيل .NET 7

تثبيت

يمكنك تثبيت الحزمة عبر Nuget مع مدير الحزمة في IDE أو بدلاً من ذلك باستخدام سطر الأوامر:

dotnet add package KristofferStrube.Blazor.FileSystemAccess

الاستخدام

يمكن استخدام الحزمة في مشاريع Blazor Webassembly و Blazor Server. (لاحظ أن تدفق الملفات الكبيرة غير مدعوم في خادم Blazor بسبب مشاكل النطاق الترددي.)

يستورد

تحتاج أيضًا إلى الرجوع إلى الحزمة لاستخدامها في صفحاتك. يمكن القيام بذلك في _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 ( ) ;

حقن في الصفحة

ثم يمكن حقن الخدمة في صفحة مثل ذلك:

 @inject IFileSystemAccessService FileSystemAccessService ;

بعد ذلك ، يمكنك استخدام IFileSystemAccessService لفتح أحد الحوارات الثلاثة المتوفرة في واجهة برمجة تطبيقات STEMISTEMACCESS مثل هذا:

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