Introducción a la API de acceso al sistema de archivos Trucos CSS

La API del sistema de archivos es una API web que permite el acceso de lectura y escritura a los archivos locales de un usuario. Abre nuevas oportunidades para crear potentes aplicaciones web, como editores de texto o IDEs, herramientas de edición de imágenes, importación / exportación mejorada, todo en la interfaz. Veamos cómo comenzar a usar esta API.

Leer archivos con la API para acceder al sistema de archivos

Antes de profundizar en el código necesario para leer un archivo del sistema del usuario, un detalle importante a tener en cuenta es que la invocación de la API del sistema de archivos debe realizarse mediante un gesto de usuario en un contexto seguroEn el siguiente ejemplo, utilizaremos un evento de clic.

Leer de un archivo

La lectura de datos de un archivo se puede hacer con menos de 10 líneas de código. Aquí hay un código de muestra:

let fileHandle;
 
document.querySelector(".pick-file").onclick = async () => {
 [fileHandle] = await window.showOpenFilePicker();
 
 const file = await fileHandle.getFile();
 const content = await file.text();
 
 return content;
};

Imaginemos que tenemos un botón en nuestro HTML con la clase .pick-fileCuando hace clic en este botón, lanzamos la herramienta de selección de archivos llamando window.showOpenFilePicker()y almacenar el resultado de esta consulta en una variable llamada fileHandle.

Lo que obtenemos de la llamada showOpenFilePicker() es una matriz de FileSystemFileHandle objetos que representan cada archivo que seleccionamos. Debido a que este ejemplo es para un solo archivo, destruimos el resultado. Le mostraré cómo seleccionar algunos archivos más adelante.

Estos objetos contienen un kind y name propiedad Si tuviera que usar console.log(fileHandle)Verá el siguiente objeto:

FileSystemFileHandle {kind: 'file', name: 'data.txt'}

EN kind puede ser file o directory.

Sobre fileHandleentonces podemos gritar getFile() método para obtener detalles sobre nuestro archivo Llamar a este método devuelve un objeto con varias propiedades, incluido un sello para la fecha en que se modificó por última vez el archivo, el nombre del archivo, su tamaño y tipo.

Finalmente podemos llamar text() en el archivo para obtener su contenido.

Leer de varios archivos

Para leer de varios archivos, necesitamos pasar un archivo options oponerse a showOpenFilePicker().

Por ejemplo:

let fileHandles;
const options = {
 multiple: true,
};
 
document.querySelector(".pick-file").onclick = async () => {
 fileHandles = await window.showOpenFilePicker(options);
 
 // The rest of the code will be shown below
};

Defecto, multiple la propiedad se establece en falseSe pueden usar otras opciones para especificar los tipos de archivo que se pueden seleccionar.

Por ejemplo, si solo quisiéramos aceptar .jpeg archivos, las opciones de objeto incluirán lo siguiente:

const options = {
 types: [
   {
     description: "Images",
     accept: {
       "image/jpeg": ".jpeg",
     },
   },
 ],
 excludeAcceptAllOption: true,
};

En este ejemplo, fileHandles es una matriz que contiene varios archivos, por lo que la recuperación de su contenido será la siguiente:

let fileHandles;
const options = {
 multiple: true,
};
 
document.querySelector(".pick-file").onclick = async () => {
 fileHandles = await window.showOpenFilePicker(options);
 
 const allContent = await Promise.all(
   fileHandles.map(async (fileHandle) => {
     const file = await fileHandle.getFile();
     const content = await file.text();
     return content;
   })
 );
 
 console.log(allContent);
};

Guardar en archivo con API para acceder al sistema de archivos

La API de acceso al sistema de archivos también le permite escribir contenido en los archivos. Primero, veamos cómo guardar un nuevo archivo.

Escribir en un archivo nuevo

¡También se puede guardar en un archivo nuevo con un código muy corto!

document.querySelector(".save-file").onclick = async () => {
 const options = {
   types: [
     {
       description: "Test files",
       accept: {
         "text/plain": [".txt"],
       },
     },
   ],
 };
 
 const handle = await window.showSaveFilePicker(options);
 const writable = await handle.createWritable();
 
 await writable.write("Hello World");
 await writable.close();
 
 return handle;
};

Si imaginamos un segundo botón con la clase save-filecuando se hace clic, abre la herramienta de selección de archivos con el método showSaveFilePicker() y nos mudamos a uno option un objeto que contiene el tipo de archivo a guardar, aquí un .txt Archivo.

Llamar a este método también devolverá un FileSystemFileHandle objeto como en la primera sección. Podemos llamar a este objeto createWritable() método que devolverá un FileSystemWritableFileStream Luego podemos guardar algo de contenido en esta secuencia con write() método en el que debemos transmitir el contenido.

Finalmente tenemos que llamar close() para cerrar el archivo y terminar de grabar el contenido del disco.

Si desea escribir algún código HTML en un archivo, por ejemplo, solo necesitará cambiar lo que está en options se opone a la aceptación "text/html": [".html"] y enviar algún contenido HTML a write() método.

Editar un archivo existente

Si desea importar un archivo y editarlo con la API de acceso al sistema de archivos, un ejemplo de código se vería así:

let fileHandle;
 
document.querySelector(".pick-file").onclick = async () => {
 [fileHandle] = await window.showOpenFilePicker();
 
 const file = await fileHandle.getFile();
 const writable = await fileHandle.createWritable();
 
 await writable.write("This is a new line");
 await writable.close();
};

Si ha estado siguiendo el resto de esta publicación, puede decir que estamos comenzando con showOpenFilePicker() y getFile() métodos para leer el archivo y luego usar createWritable(), write() y close() para guardar en el mismo archivo.

Si el archivo que está importando ya tiene contenido, este código de muestra reemplazará el contenido actual con el nuevo enviado en write() método.

Funciones adicionales de la API para acceder al sistema de archivos

Sin entrar en demasiados detalles, la API de acceso al sistema de archivos también le permite enumerar archivos en directorios y eliminar archivos o directorios.

Leer directorios

La lectura de directorios se puede hacer con un pequeño código:

document.querySelector(".read-dir").onclick = async () => {
 const directoryHandle = await window.showDirectoryPicker();
 
 for await (const entry of directoryHandle.values()) {
   console.log(entry.kind, entry.name);
 }
};

Si añadimos un nuevo botón con la clase .read-diral hacer clic, llamando showDirectoryPicker() El método abrirá la herramienta de selección de archivos y cuando seleccione un directorio en su computadora, este código mostrará una lista de los archivos que se encuentran en ese directorio.

Borrar archivos

La eliminación de un archivo en un directorio se puede hacer con el siguiente ejemplo código:

document.querySelector(".pick-file").onclick = async () => {
 const [fileHandle] = await window.showOpenFilePicker();
 await fileHandle.remove();
};

Si desea eliminar una carpeta, solo haga un pequeño cambio en el código de muestra anterior:

document.querySelector(".read-dir").onclick = async () => {
 const directoryHandle = await window.showDirectoryPicker();
 await directoryHandle.remove();
};

Finalmente, si desea eliminar un archivo específico al seleccionar una carpeta, puede escribirlo así:

// Delete a single file named data.txt in the selected folder
document.querySelector(".pick-folder").onclick = async () => {
   const directoryHandle = await window.showDirectoryPicker();
   await directoryHandle.removeEntry("data.txt");
};

Y si desea eliminar una carpeta completa, necesitará las siguientes líneas:

// Recursively delete the folder named "data"
document.querySelector(".pick-folder").onclick = async () => {
   const directoryHandle = await window.showDirectoryPicker();
   await directoryHandle.removeEntry('data', { recursive: true });
};

Compatibilidad con la API del navegador para el acceso al sistema de archivos

En este momento, IE y Firefox no parecen admitir la API del sistema de archivos. Sin embargo, existe ponifil Llamado navegador-fs-acceso.

resumiendo

Si desea probar la API para acceder al sistema de archivos, vea esto Editor de texto de demostración en vivo creado por los ingenieros de Google. De lo contrario, si desea obtener más información sobre esta API y todas sus características, aquí hay algunos recursos: