¿Te permite HTML5 interactuar con archivos de clientes locales desde un navegador?

He visto algunas publicaciones relacionadas con el acceso a archivos en una máquina cliente por una página web, concretamente esta pregunta .

Estoy tratando de aprovechar el paradigma de “actualización continua en la nube” para algunos algoritmos que estoy escribiendo para que mis usuarios puedan acceder a las últimas versiones simplemente accediendo a la página web. Esto requiere que el progtwig / página web pueda comenzar con un directorio e inspeccionar los archivos dentro de él y calcular los resultados en función de lo que se encuentre. Al final también debe poder escribir el archivo de resultados en el sistema de archivos del cliente.

Una de las respuestas en la pregunta anterior menciona Google Gears, pero desde entonces se ha suspendido a favor de HTML5. ¿Es posible acceder a un directorio de clientes dentro de HTML5? ¿Cómo?

Sé por qué el acceso de cualquier página web a los archivos locales es un riesgo de seguridad, pero para mi propósito no tengo ningún problema para pedirle al usuario los permisos apropiados.

No, al menos no directamente. Sin embargo, tienes varias opciones aquí.

Actualmente, tus mejores opciones son:

  • Arrastre y suelte archivos desde el escritorio, consulte un tutorial .
  • Use el archivo de tipo de entrada.
    • Lea los contenidos con File API o envíe el formulario. Lea más en el Centro de Desarrolladores de Mozilla para leer el archivo dinámicamente.
    • Puede especificar multiple atributos para leer y abrir múltiples archivos a la vez sin tener que tener campos separados.
    • Puede tener una entrada invisible y “activar un clic” para abrir el cuadro de diálogo Abrir archivo. Consulte el enlace anterior del Centro de desarrolladores de Mozilla para obtener más información.
  • Use la API FileSystem que le permite crear, borrar, leer y modificar archivos en el sistema de archivos. Nota: obtienes un directorio de espacio aislado para trabajar, no puedes acceder a todo el sistema simplemente así.
  • Use Java con applets firmados para acceder a todo el sistema de archivos. Esto requiere que el usuario acepte la firma.

Chrome 6 también será compatible con la API de archivos

Como se mencionó anteriormente, las API FileSystem y File , junto con la API FileWriter , se pueden utilizar para leer y escribir archivos desde el contexto de una pestaña / ventana del navegador a una máquina cliente.

Hay varias cosas relacionadas con las API FileSystem y FileWriter de las que debe tener conocimiento, algunas de las cuales se mencionaron, pero vale la pena repetirlas:

  • Las implementaciones de las API actualmente existen solo en los navegadores basados ​​en Chromium (Chrome y Opera)
  • Ambas API se quitaron de la pista de normas W3C el 24 de abril de 2014 y, a partir de ahora, están patentadas
  • La eliminación de las API (ahora propietarias) de los navegadores de implementación en el futuro es una posibilidad
  • Una zona de pruebas (una ubicación en el disco fuera de la cual los archivos no pueden producir ningún efecto) se usa para almacenar los archivos creados con las API.
  • Un sistema de archivos virtual (una estructura de directorio que no existe necesariamente en el disco de la misma forma que cuando se accede desde el navegador) se utiliza para representar los archivos creados con las API.

Aquí hay ejemplos simples de cómo se usan las API, directa e indirectamente, en conjunto para hacer estas cosas:

BakedGoods *

Escribir archivo:

 bakedGoods.set({ data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}], storageTypes: ["fileSystem"], options: {fileSystem:{storageType: Window.PERSISTENT}}, complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){} }); 

Leer archivo:

 bakedGoods.get({ data: ["testFile"], storageTypes: ["fileSystem"], options: {fileSystem:{storageType: Window.PERSISTENT}}, complete: function(resultDataObj, byStorageTypeErrorObj){} }); 

Uso de las API raw File, FileWriter y FileSystem

Escribir archivo:

 function onQuotaRequestSuccess(grantedQuota) { function saveFile(directoryEntry) { function createFileWriter(fileEntry) { function write(fileWriter) { var dataBlob = new Blob(["Hello world!"], {type: "text/plain"}); fileWriter.write(dataBlob); } fileEntry.createWriter(write); } directoryEntry.getFile( "testFile", {create: true, exclusive: true}, createFileWriter ); } requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile); } var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess); 

Leer archivo:

 function onQuotaRequestSuccess(grantedQuota) { function getfile(directoryEntry) { function readFile(fileEntry) { function read(file) { var fileReader = new FileReader(); fileReader.onload = function(){var fileData = fileReader.result}; fileReader.readAsText(file); } fileEntry.file(read); } directoryEntry.getFile( "testFile", {create: false}, readFile ); } requestFileSystem(Window.PERSISTENT, grantedQuota, getFile); } var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess); 

Dado el estado actual de las API FileSystem y FileWriter, su utilización para leer y escribir archivos actualmente no constituye una “forma HTML5” de hacer esas cosas.

Sin embargo, el interés renovado en las API por parte de los proveedores de navegadores que no implementan puede colocarlos de nuevo en el camino de los estándares. Eso, combinado con la alta penetración en el mercado de los navegadores basados ​​en Chromium y el hecho de que Google (el principal contribuyente a Chromium) no ha dado y la fecha de finalización de la vida de las API debería ser suficiente para justificar su uso en algunos casos.

* BakedGoods es mantenido por nada menos que este chico aquí 🙂