Les applications Web peuvent maintenant interagir avec votre système de fichiers –

L’API d’accès au système de fichiers est une nouvelle fonctionnalité de navigateur qui permet aux sites Web et aux applications d’interagir directement avec le système de fichiers de votre appareil. Il existe désormais une prise en charge partielle de l’API dans les versions récentes de Chrome et Opera.

Aujourd’hui, l’API d’accès au système de fichiers était connue sous le nom d’API du système de fichiers natif. Il a eu un long développement impliquant plusieurs cycles d’itération pour résoudre les problèmes de sécurité. La fonctionnalité a été activée dans la version stable de Chrome 86.

Aperçu

La prise en charge des fichiers sur le Web s’est historiquement limitée à la sélection d’un fichier sur votre appareil à l’aide de <input type="file">. Il est impossible d’écrire directement sur le système de fichiers de l’utilisateur à l’aide des API précédentes. Vous devez utiliser des liens de téléchargement si vous devez fournir un fichier à l’utilisateur.

L’API d’accès au système de fichiers permet aux sites Web d’accéder en lecture-écriture au système de fichiers de votre appareil. Cela permet de créer de nouvelles classes d’applications Web complexes qui interagissent avec vos fichiers. Les éditeurs de texte Web, les photothèques et les lecteurs multimédias peuvent tous charger du contenu stocké localement sur votre appareil.

À l’aide de l’API, vous pouvez énumérer le contenu des répertoires, lire les données des fichiers et réécrire dans les fichiers nouveaux et existants stockés sur l’appareil de l’utilisateur. L’accès se fait via le FileSystemFileHandle et FileSystemDirectoryHandle gérer des objets, qui représentent des fichiers sur le système de l’utilisateur.

L’API d’accès au système de fichiers ne peut être utilisée qu’à partir de pages chargées via HTTPS. Il est fermé derrière des autorisations auxquelles l’utilisateur doit explicitement consentir. L’utilisateur sera invité à donner son consentement chaque fois que vous utilisez l’API. Cela utilise le même système que les demandes d’autorisation pour d’autres fonctionnalités Web, telles que les notifications et l’accès à la caméra.

Comme la plupart des API JavaScript modernes, l’accès au système de fichiers est asynchrone. Les appels à sa surface API renvoient des promesses. Le moyen le plus propre de le consommer est via le async/await syntaxe de ES7, que nous utiliserons dans les exemples suivants.

Lire un fichier

Pour lire un fichier, vous ouvrez un sélecteur de fichiers à l’aide de la window.showOpenFilePicker() fonction. Il n’est pas nécessaire d’utiliser le HTML <input type="file"> élément.

Le système d’exploitation de l’utilisateur rendra un sélecteur de fichiers natif. Une fois que l’utilisateur sélectionne un fichier, la promesse retournée sera résolue avec un tableau de FileSystemFileHandle objets.

Pour obtenir le contenu du fichier, appelez le getFile() méthode du descripteur de fichier. Cela renvoie un File objet, qui est ce que vous obtenez lorsque vous travaillez avec un sélecteur de fichiers HTML. Une fois que vous avez le File, vous pouvez utiliser ses méthodes blob telles que text() et stream() pour lire ses données.

const [fileHandle] = await window.showOpenFilePicker();
const file = await file.getFile();
const fileData = await file.text();
console.log(fileData);

window.showOpenFilePicker() accepte un objet d’options comme son seul paramètre. Vous pouvez autoriser l’utilisateur à sélectionner plusieurs fichiers en définissant le multiple option. Pour restreindre l’utilisateur à des types de fichiers spécifiques, transmettez le types option avec un tableau d’objets décrivant les types autorisés. Chaque objet de type doit contenir description et accept propriétés qui déterminent respectivement le libellé du sélecteur de fichier du type et les types MIME autorisés.

const files = await window.showOpenFilePicker({
    multiple: true,
    types: [
        {
            description: "Image Files",
            accept: ["image/jpeg", "image/png"]
        }
    ]
});
 
for await (file of files) {
    const fileData = await file.getFile();
    console.log(fileData);
}

Une option «tous les fichiers» est généralement affichée comme un type de fichier autorisé, même lorsque le types l’option est définie. Vous pouvez désactiver le remplacement de tous les fichiers en définissant le excludeAcceptAllOption option.

Ecrire dans un fichier

Une fois que vous avez un descripteur de fichier, vous pouvez également y écrire! Il y a une autre couche d’abstraction à affronter car vous devez d’abord acquérir un FileSystemWritableFileStream. Ce flux représente le fichier et vous permet de conserver les écritures en mémoire jusqu’à ce qu’elles soient conservées sur le disque.

Voici comment remplacer le contenu d’un descripteur de fichier obtenu à partir de showOpenFilePicker():

// User selects a file
const fileHandle = await window.showOpenFilePicker();
 
// Get a `FileSystemWritableFileStream` we can write to
const writableFileStream = await fileHandle.createWritable();
 
// Write new file contents into the stream
await writableFileStream.write("Hello World");
 
// Close the writable stream - its content is now persisted to the file on disk
await writableFileStream.close();

Appel write() sur un flux inscriptible insérera du texte à la position actuelle du curseur dans le flux. Pour changer la position du curseur, appelez le seek() méthode passant la nouvelle position du curseur. Une troisième méthode sur les flux inscriptibles est truncate(), qui redimensionne le fichier jusqu’à une taille maximale en octets que vous devez spécifier.

Parfois, vous devrez écrire dans un nouveau fichier. Vous pouvez le faire en demandant à l’utilisateur de choisir un nouvel emplacement pour le fichier à l’aide de window.showSaveFilePicker(). Cela fonctionne de la même manière que window.showOpenFilePicker() – il renvoie un FileHandle que vous pourrez alors appeler createWritable() activé pour obtenir un flux accessible en écriture.

const fileHandle = await window.showSaveFilePicker();
const writable = await fileHandle.createWritable();
await writable.write("Hello World");
await writable.close();

Vous pouvez utiliser le excludeAcceptAllOption et types options avec window.showSaveFilePicker(). Ils fonctionnent de manière identique à leur showOpenFilePicker() homologues.

Répertoires

L’API d’accès au système de fichiers expose également les répertoires. L’utilisateur peut être invité à sélectionner un répertoire à l’aide de window.showDirectoryPicker(). Cette fonction n’accepte aucun paramètre. Il renvoie une promesse qui se résoudra avec un FileSystemDirectoryHandle représentant l’annuaire.

Vous pouvez énumérer le contenu du répertoire en itérant sur son values(). Les valeurs seront des instances de descripteur de fichier ou de répertoire.

const directoryHandle = window.showDirectoryPicker();
for await (let handle of directoryHandle.values()) {
    if (handle.type === "file") {
        // file
    }
    if (handle.type === "directory") {
        // subdirectory
    }
}

Si vous connaissez le nom du fichier ou du sous-répertoire que vous recherchez, vous pouvez utiliser le getFileHandle() ou getDirectoryHandle() méthodes pour le récupérer. Ces méthodes acceptent toutes les deux un objet d’options qui a actuellement une seule propriété, create. Définir ceci sur true entraînera la création automatique du fichier ou du répertoire demandé dans le système de fichiers s’il n’existe pas déjà.

Vous pouvez supprimer des fichiers et des dossiers d’un répertoire à l’aide du removeEntry() méthode sur un descripteur de répertoire. Cela accepte le nom relatif du fichier ou du sous-répertoire à supprimer. Lors de la suppression d’un répertoire, vous pouvez éventuellement définir le recursive option pour supprimer également son contenu.

await directoryHandle.removeEntry("file.txt");
await directoryHandle.removeEntry("Subdirectory", {recursive: true});

Autorisations

Les autorisations pour l’API d’accès au système de fichiers sont divisées en composants de lecture et d’écriture. Les navigateurs afficheront généralement un séparé invite d’autorisation pour la lecture et l’écriture et pour chaque fichier ou répertoire auquel vous accédez.

Une fois que vous avez obtenu l’autorisation, vous pouvez utiliser le descripteur de fichier ou de répertoire aussi longtemps que votre site reste ouvert. Une exception est si la ressource sous-jacente est changée ou modifiée sur le disque, auquel cas le handle est invalidé.

Vous pouvez vérifier si vous avez toujours l’autorisation d’utiliser un handle en appelant son queryPermission() méthode:

const mode = "read";    // may also be "readwrite"
if (await fileHandle.queryPermission({mode}) === "granted") {
    // OK
}

Lorsque vous devez demander à nouveau l’autorisation, utilisez le requestPermission() méthode de la même manière.

Vous devez éviter de demander l’autorisation trop souvent ou pour trop de fichiers. Cela est susceptible de créer une mauvaise expérience utilisateur en raison de l’apparition de plusieurs boîtes de dialogue successives. Demandez toujours l’autorisation en réponse à une action explicite de l’utilisateur, par exemple en cliquant sur un bouton.

L’API ne prévoit pas d’octroi d’autorisations persistantes. Une fois que tous les onglets de votre site ont été fermés, toutes les autorisations de fichier accordées seront révoquées.

Conclusion

L’API d’accès au système de fichiers est l’une des API de navigateur les plus intéressantes à avoir été lancées ces derniers mois. Il a le potentiel de transformer les capacités des applications Web, ce qui en fait une alternative encore plus viable aux programmes de bureau.

Que vous construisiez un éditeur de texte, une galerie de photos ou une application métier, le fait de pouvoir interagir avec le système de fichiers de l’appareil vous offre de nouvelles possibilités. Bien que la prise en charge des navigateurs soit limitée à Chrome et Opera dans un avenir prévisible (Mozilla considère l’API comme «potentiellement très dangereuse»), File System Access aide à faire évoluer le Web en tant que plate-forme d’application et réduit encore l’écart entre le Web et les applications natives.