¿Cómo se leen y escriben archivos con HTML5 File API?

1 Lectura de archivos

Para leer archivos con HTML5 File API, debe usar el objeto FileReader, que puede leer archivos como texto, binario, URL de datos o búfer de matriz. Puede crear una instancia de FileReader y utilizar sus métodos para leer archivos de varios orígenes, como elementos de entrada, eventos de arrastrar y colocar o respuestas XMLHttpRequest. También debe agregar detectores de eventos para controlar los eventos de carga, error y progreso del FileReader. Por ejemplo, el código siguiente lee un archivo de un elemento input y muestra su contenido en un elemento de párrafo:

var input = document.getElementById("file-input");
var output = document.getElementById("file-output");
input.addEventListener("change", function() {
  var file = input.files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    output.textContent = reader.result;
  });
  reader.addEventListener("error", function() {
    output.textContent = "Error reading file";
  });
  reader.readAsText(file);
});        

2 Escritura de archivos

Para escribir archivos con HTML5 File API, debe usar la API FileSystem, que le permite crear y acceder a un sistema de archivos virtual en el dispositivo del usuario. Puede usarlo para escribir archivos en un almacenamiento temporal o persistente, según el permiso y la disponibilidad del usuario. Debe solicitar un objeto del sistema de archivos y utilizar sus métodos para crear, abrir, escribir y eliminar archivos. También debe controlar las devoluciones de llamada correctas y de error de la API del sistema de archivos. Por ejemplo, el código siguiente escribe un archivo de texto en un almacenamiento temporal y muestra su dirección URL en un elemento de párrafo:

var output = document.getElementById("file-output");
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
  fs.root.getFile("test.txt", {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function() {
        output.textContent = fileEntry.toURL();
      };
      fileWriter.onerror = function(e) {
        output.textContent = "Error writing file";
      };
      var blob = new Blob(["Hello, world!"], {type: "text/plain"});
      fileWriter.write(blob);
    }, handleError);
  }, handleError);
}, handleError);
function handleError(e) {
  output.textContent = "Error accessing file system";
}        

HTML5 File API es una forma potente y flexible de leer y escribir archivos con HTML5. Puede usarlo para crear aplicaciones web interactivas y dinámicas que puedan manejar contenido generado por el usuario, almacenamiento sin conexión y características multimedia. Sin embargo, también debe tener en cuenta los problemas de compatibilidad, seguridad y rendimiento del navegador que conlleva el uso de la API de archivos HTML5.

3 Esto es lo que más debe considerar

Este es un espacio para compartir ejemplos, historias o ideas que no encajan en ninguna de las secciones anteriores. ¿Qué más le gustaría añadir?