Lire, écrire et supprimer des fichiers en JavaScript à l'aide d'html 5

Tutoriel Posté par Koener Hervé le 08/04/2014.

intégralité sur Tutoriels en Folie

Introduction

Actuellement, seul Google Chrome supporte le FileSystem API d'HTML5.

Créer un système de fichier

Avant de créer, modifier ou accéder à des fichiers stockés en local en JavaScript, nous devons avoir accès à un système de fichier. Utiliser la méthode « requestFileSystem ». Plusieurs arguments peuvent être utilisés afin de personnaliser notre système de fichier:

• type: définit si le stockage est persistant (window.PERSISTENT) ou temporaire (window.TEMPORARY);

• size:définit la taille de l'espace de stockage en bytes;

• successCallback: fonction appelée lorsque le système de fichier est disponible;

• opt_errorCallback: fonction appelée s'il y a une erreur lors de l'initialisation du système de fichier;

Le système de fichier est placé dans une sandbox, c'est à dire que l'on peut avoir accès qu'aux fichiers créés par l'application JavaScript. NB: la permission de l'utilisateur est requise lorsque l'on essaye de créer un système de fichier persistant.

Voici un exemple:

function onInitFs(fs) {
   alert('Systeme de fichier: ' + fs.name);
}

function errorHandler(e) {
   var msg = '';
   switch (e.code) {
      case FileError.QUOTA_EXCEEDED_ERR:
         msg = 'QUOTA_EXCEEDED_ERR';
         break;
      case FileError.NOT_FOUND_ERR:
         msg = 'NOT_FOUND_ERR';
         break;
      case FileError.SECURITY_ERR:
         msg = 'SECURITY_ERR';
         break;
      case FileError.INVALID_MODIFICATION_ERR:
         msg = 'INVALID_MODIFICATION_ERR';
         break;
      case FileError.INVALID_STATE_ERR:
         msg = 'INVALID_STATE_ERR';
         break;
      default:
         msg = 'Unknown Error';
         break;
   };
   alert('Error: ' + msg);
}

window.requestFileSystem = window.requestFileSystem ¦¦ window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1*1024*1024 /*1MB*/, onInitFs, errorHandler);

Créer un fichier avec getFile

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true, exclusive: true}, function(fileEntry) {
      alert(fileEntry.name);
   }, errorHandler);
}

Ouvrir et lire le fichier

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {}, readFile, errorHandler);
}
function readFile(fileEntry) {
   // On récupère l'objet File qui représente le fichier,
   // Ensuite on utilise FileReader pour le lire.
   fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function(e) {
         alert(this.result);
      };
      reader.readAsText(file);
   }, errorHandler);
}

window.requestFileSystem = window.requestFileSystem ¦¦ window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Comme vous pouvez le voir ci-dessus, la méthode « readFile » reçoit un objet de type FileEntry. Cet objet représente le fichier à lire. Nous utilisons ensuite un FileReader afin de lire le contenu de ce fichier.

Ecrire dans le fichier

Je vais maintenant vous expliquer comment écrire dans un fichier en JavaScript à l'aide de l'HTML5. Pour ce faire nous allons utiliser l'objet FileWriter:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true}, writeFile, errorHandler);
}
function writeFile(fileEntry) {
   fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
         alert('OK.');
      };
      fileWriter.onerror = function(e) {
         alert('Error: ' + e.toString());
      };
      // On crée un objet Blob pour écrire dans le fichier.
      var data = new Blob(['Tutoriels en folie'], {type: 'text/plain'});
      fileWriter.write(data);
   }, errorHandler);
}

window.requestFileSystem = window.requestFileSystem ¦¦ window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

La configuration {create: true} permet de créer le fichier si celui-ci n'existe pas.

Dans l'exemple ci-dessus nous remplaçons l'entièreté du contenu du fichier. Voici un exemple ou l'on ajoute les données à la fin du fichier:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true}, writeFile, errorHandler);
}
function writeFile(fileEntry) {
   fileEntry.createWriter(function(fileWriter) {
      // On commence à la fin du fichier.
      fileWriter.seek(fileWriter.length);
      // On crée un objet Blob pour écrire dans le fichier.
      var data = new Blob(['Tutoriels en folie'], {type: 'text/plain'});
      fileWriter.write(data);
   }, errorHandler);
}

window.requestFileSystem = window.requestFileSystem ¦¦ window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Supprimer le fichier

Pour supprimer le fichier à l'aide de l'api HTML5, il suffit d'exécuter la méthode JavaScript « remove » de l'objet FileEntry:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: false}, deleteFile, errorHandler);
}
function deleteFile(fileEntry) {
   fileEntry.remove(function() {
      alert('OK');
   }, errorHandler);
}

window.requestFileSystem = window.requestFileSystem ¦¦ window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Trois autres tutoriels peuvent vous inéresser:

Le premier explique comment manipuler les dossiers à l'aide de l'api html 5;
Le second explique comment exécuter des fonctions avancées sur des fichiers à l'aide de l'api html 5;
Le troisième explique comment afficher des images ou des document enregistré en local à l'aide de l'api html 5;