Un envoltorio de blazor para el acceso al sistema de archivos API del navegador
La API permite leer y escribir en su sistema de archivos local desde el navegador tanto archivos como directorios.
Descargo de responsabilidad: la API es compatible con un conjunto limitado de navegadores. Lo más notable no es compatible con Firefox, Chrome para Android e iOS Mobile Browsers.
El proyecto de muestra se puede demostrar en https://kristofferstube.github.io/blazor.filesystemAccess/
En cada página puede encontrar el código correspondiente para el ejemplo en la esquina superior derecha.
En la página principal puede ver si la API tiene al menos un soporte mínimo en el navegador usado.
En la página de estado, puede ver cuánto de las especificaciones de WebIDL ha cubierto este envoltorio.
Debe instalar .NET 7.0 o más nuevo para usar la biblioteca.
Descargar .net 7
Puede instalar el paquete a través de Nuget con el Administrador de paquetes en su IDE o alternativamente usando la línea de comando:
dotnet add package KristofferStrube.Blazor.FileSystemAccessEl paquete se puede usar en Blazor WebAssembly y Blazor Server Projects. (Tenga en cuenta que la transmisión de archivos grandes no es compatible en Blazor Server debido a problemas de ancho de banda).
También debe hacer referencia al paquete para usarlo en sus páginas. Esto se puede hacer en _Import.razor agregando lo siguiente.
@ using KristofferStrube . Blazor . FileSystemAccess Una manera fácil de hacer que el servicio esté disponible en todas sus páginas es registrándolo en la IServiceCollection para que pueda inyectarse dependencia en las páginas que lo necesitan. Esto se hace en Program.cs agregando lo siguiente antes de construir el host y ejecutarlo.
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 ( ) ; Entonces el servicio se puede inyectar en una página como así:
@inject IFileSystemAccessService FileSystemAccessService ; Luego puede usar IFileSystemAccessService para abrir uno de los tres diálogos disponibles en la API de SystemAccess de archivos como esta:
< 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 ();
}
}
}
}Siéntase libre de abrir problemas en el repositorio si encuentra algún error con el paquete o tiene deseos para las características.
Un problema conocido es que el uso de transmisiones para transmitir una gran cantidad de datos en el servidor Blazor no es compatible.
Este proyecto utiliza el paquete blazor.fileSystem para devolver FileSystemHandle rico en ambos FileSystemFileHande sy FileSystemDirectoryHandle s.
Este repositorio fue construido con inspiración y ayuda de la siguiente serie de artículos: