Reading and writing files and directories with the browser-nativefs library

July 27, 2020

The browsersConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet plus han podido tratar con archivos y directorios por mucho tiempo. los File API
proporciona funciones para representar objetos de archivo en aplicaciones web, así como para seleccionarlos a través de programmingConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura plus y ingresar a sus datos. A pesar de todo, en el momento en que miras más de cerca, todo lo que brilla no es oro.

The traditional way of handling files

Open files

As a developer, you can open and read files through the

element. In its simplest form, opening a file may resemble the following code example. the input the object gives you a FileList, which in the following case consists of only one
File. A File is a specific type of Blob, and can be used in any context that a Blob can.

const openFile = async () => {
return new Promise((resolve) => {
const input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', () => {
resolve(input.files[0]);
});
input.click¿Qué es un click?Es la acción de pulsar un botón del ratón una vez colocado el puntero del mismo sobre un elemento determinado de la pantalla. El click determina la interacción del usuario con el sistema.Otras denominaciones: Clic plus();
});
};

Open directories

To open folders (or directories), you can configure the

attributeAtributo es una definición que se usa en varios campos de IT. Generalmente, un atributo se usa para describir un fichero o un campo de datos con más detalle. En la programación orientada a objetos, los atributos son una propiedad o característica que se puede asignar a un objeto (elemento). A través el uso de atributos se pueden asignar valores específicos a ciertos items. Áreas de aplicación Las tres áreas plus. Aparte de eso, todo lo demás funciona igual que arriba. Pese a su nombre con prefijo de proveedor,
webkitdirectory It can be used not only in Chromium and WebKit browsers, but also in legacy EdgeHTML-based Edge and Firefox.

Save (rather: download) files

To store a file, traditionally, you are limited to downloading a file, which works thanks to the
<a download>

attribute. Given a Blob, you can determine the anchor href attribute to a blob: UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus que puede conseguir del
URL.createObjectURL ()

method.

const saveFile = async (blob) => {
const to = document.createElement('a');
to.download = 'my-file.txt';
to.href = Url.createObjectURL(blob);
to.addEventListener('click', (and) => {
setTimeout(() => Url.revokeObjectURL(to.href), 30 * 1000);
});
to.click();
};

The problem

A massive downside to to download approach is that there is no way to make a classic open → edit → save flow happen, in other words, there is no way to Overwrite the original file. Instead, you end up with a new Copy from the original file in the default download folder of the operating system every time you "save".

The APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene plus del sistema de archivos nativo

The native file system API makes both open and save operations much easier. Furthermore, it enables real savingsIn other words, you can not only choose where to save a file, but also overwrite an existing file.

Open files

With the Native file system API, opening a file is a matter of a call to the window.showOpenFilePicker () method. This call returns a file handle, from which you can get the File through him getFile () method.

const openFile = async () => {
try {
const [handle] = await window. showOpenFilePicker();
return handle.getFile();
} catch (err) {
console.error(err.yam, err.message);
}
};

Open directories

Open a directory by calling
window.showDirectoryPicker () which makes directories selectable in the file dialog.

Save files

Saving files is equally simple. From a file handle, create a write stream using createWritable (), then write the Blob data by calling the flow write () method, and in conclusion closes the sequence by calling its close () method.

const saveFile = async (blob) => {
try {
const handle = await window.showSaveFilePicker({
types: [{
accept: {
},
}],
});
const writable = await handle.createWritable();
await writable.write(blob);
await writable.close();
return handle;
} catch (err) {
console.error(err.yam, err.message);
}
};

Introducing browser-nativefs

As stupendously good as the native file system API, it is not yet widely available.

Es es por esto que que veo la API del sistema de archivos nativo como una progressive improvementLa mejora progresiva es una estrategia de diseño web diseñada para permitir que el contenido básico de una web se muestre independientemente de la tecnología del navegador, la conexión a Internet o el tipo de dispositivo final. A la vez, no obstante, la web en cuestión además debería ofrecer una versión completa diseñada para satisfacer los mejores requerimientos técnicos posibles. Un resultado de esta estrategia es un diseño responsive. Una plus. Como tal, quiero usarlo cuando el navegador lo admita, y utilizar el enfoque tradicional si no; todo ello sin castigar nunca al usuario con descargas innecesarias de código JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar plus no compatible. los browser-nativefs
Library is my answer to this challenge.

Design philosophy

Since the native filesystem API is likely to change in the future, the browser-nativefs API is not based on it. In other words, the library is not a polyfill, but rather a ponyfill. You can (statically or dynamically) exclusively import whatever functionality you need to keep your application as small as possible. The available methods are those appropriately named
fileOpen (),
directoryOpen ()and
fileSave (). Internally, the library function detects whether the native file system API is supported and then imports the respective code path.

Using the browser-nativefs library

All three methods are intuitive to use. You can specify acceptance of your application mimeTypes or file extensionsand establish a multiple Check to allow or disallow selection of multiple files or directories. For complete details, see the
browser-nativefs API documentation. The following code example shows how you can open and save image files.

import {
fileOpen,
directoryOpen,
fileSave,
} desde 'httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar plus://unpkg.com/browser-nativefs';
(async () => {
const blob = await fileOpen({
mimeTypes: ['image/*'],
});

const blobs = await fileOpen({
mimeTypes: ['image/*'],
multiple: true,
});

const blobsInDirectory = await directoryOpen({
recursive: true
});

await fileSave(blob, {
fileName: 'Untitled.png',
});
})();

Manifestation

You can see the above code in action in a manifestation in Glitch. Their source code además se encuentra disponible allí. Ya que, por razones de seguridad, los subtramas de origen cruzado no pueden mostrar un selector de archivos, la demostración no se puede incrustar en este postConcepto de Post¿Qué es un Post?Un Post es todo aquel contenido, sea post, opinión, noticia u otro género, que un autor publica en un blog. Este puede ser de carácter corporativo o meramente ocioso; pero siempre tiene como meta arrojar información o reflejar una idea, al mismo tiempo de facilitar que los usuarios encuentren la web donde se recoge por medio de de buscadores y demás plataformas online.Generalmente, se han plus.

The browser-nativefs library in nature

In my spare time, I contribute a little bit to an installable PWA called Excalidraw, a whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel. It is fully responsive and works quite well on a range of devices, from small mobile phones to computers with large screens. This means that you must handle files on all the various platforms, whether or not they support the native file system API. This makes it a great candidate for the browser-nativefs library.

I can, as an example, start a drawing on my iPhone, save it (technically: download it, since Safari doesn't support the native file system API) to the Downloads folder on my iPhone, open the file on my desktop ( after transferring it from my phone), modify the file and overwrite it with my changes, or even save it as a new file.

Real life code example

Below you can see a real example of browser-nativefs as used in Excalidraw. This extract is taken from
/src/data/json.ts. Of special interest is how saveAsJSON () pass a file handle or null to browser-nativefs'
fileSave () , which causes it to be overwritten when a handle is assigned, or to be saved to a new file if not.

export const saveAsJSON = async (
elements: readonly ExcalidrawElement[],
appState: AppState,
fileHandle: any,
) => {
const serialized = serializeAsJSON(elements, appState);
const blob = new Blob([serialized], {
type: "application/json",
});
const yam = `${appState.yam}.excalidraw`;
(window ace any).handle = await fileSave(
blob,
{
fileName: yam,
description: "Excalidraw file",
extensions: ["excalidraw"],
},
fileHandle || null,
);
};
export const loadFromJSON = async () => {
const blob = await fileOpen({
description: "Excalidraw files",
extensions: ["json", "excalidraw"],
mimeTypes: ["application/json"],
});
return loadFromBlob(blob);
};

Consideraciones sobre la user interface  Una interfaz de usuario es un medio por medio de del cual una persona puede controlar un software o hardware específico. Lo ideal es que las interfaces de usuario sean fáciles de utilizar para que la interacción sea lo más instintiva e intuitiva factible. En el caso de los programas informáticos, esto se denomina interfaz gráfica de usuario. Desarrollo y tipos de interfaces de usuario A diferencia de la plus

Whether in Excalidraw or in your application, the user interface must be adapted to the browser support situation. If the native file system API (if ('showOpenFilePicker' in window) {}) you can show a Save as button at the same time of a Save button. The screenshots below show the difference between Excalidraw's responsive main app toolbar on the iPhone and the Chrome desktop. Note how on iPhone the Save as The button is missing.

Conclusions

Working with native files technically works in all modern browsers. In browsers that support the Native File System API, you can improve the experience by allowing true saving and overwriting (not just downloading) of files and by allowing your users to create new files wherever they want, all while remaining functional in browsers that do. it does not support the native file system API. the browser-nativefs It makes your life easier by dealing with the subtleties of progressive enhancement and making your code as simple as possible.

Thanks

This post was reviewed by Joe medley and
Kayce Basques. Thanks to Excalidraw collaborators
for your work on the project and for reviewing my Pull Requests.
Hero image for
Ilya Pavlov on Unsplash.