API File Reader

Si cuenta con alguna experiencia anterior en programación, o simplemente siguió este capítulo desde el comienzo, le resultará fácil reconocer la cantidad de código necesario para realizar tareas sencillas. Ahora imagine todo el trabajo que debería hacer para construir un sistema de bases de datos desde cero, o generar gráficos complejos en la pantalla, o crear una aplicación para manipulación de imágenes, por nombrar unos pocos. Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento. Y por la misma razón que lenguajes de programación profesionales poseen librerías para crear elementos gráficos, motores 3D para video juegos o interfaces para acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a lidiar con actividades complejas.

File

Bajo el título de File, HTML5 ofrece varias APIs destinadas a operar con archivos. En este momento existen tres disponibles: File, File: Directories & System, y File: Writer. Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el ordenador del usuario.

Los archivos son unidades de información que usuarios pueden fácilmente compartir con otras personas. Los usuarios no pueden compartir el valor de una variable o un par clave/valor como los usados por la API Web Storage, pero ciertamente pueden hacer copias de sus archivos y enviarlos por medio de un DVD, memorias portátiles, discos duros, transmitirlos a través de Internet, etc… Los archivos pueden almacenar grandes cantidades de datos y ser movidos, duplicados o transmitidos independientemente de la naturaleza de su contenido.

Los archivos fueron siempre una parte esencial de cada aplicación, pero hasta ahora no había forma posible de trabajar con ellos en la web. Las opciones estaban limitadas a subir o descargar archivos ya existentes en servidores u ordenadores de usuarios. No existía la posibilidad de crear archivos, copiarlos o procesarlos en la web… hasta hoy.

La especificación de HTML5 fue desarrollada considerando cada aspecto necesario para la construcción y funcionalidad de aplicaciones web. Desde el diseño hasta la estructura elemental de los datos, todo fue cubierto. Y los archivos no podían ser ignorados, por supuesto. Por esta razón, la especificación incorpora la API File.

LA API File comparte algunas características con las API de almacenamiento estudiadas en capítulos previos. Esta API posee una infraestructura de bajo nivel, aunque no tan compleja como IndexedDB, y al igual que otras pueden trabajar de forma síncrona o asíncrona. La parte síncrona fue desarrollada para ser usada con la API Web Workers (del mismo modo que IndexedDB y otras APIs), y la parte asíncrona está destinada a aplicaciones web convencionales. Estas características nos obligan nuevamente a cuidar cada aspecto del proceso, controlar si la operación fue exitosa o devolvió errores, y probablemente adoptar (o desarrollar nosotros mismos) en el futuro APIs más simples construidas sobre la misma.

API File es una vieja API que ha sido mejorada y expandida. Al día de hoy está compuesta por tres especificaciones: API File, API File: Directories & System, y API File: Writer, pero esta situación puede cambiar durante los siguientes meses con la incorporación de nuevas especificaciones o incluso la unificación de algunas de las ya existentes.

Básicamente, la API File nos permite interactuar con archivos locales y procesar su contenido en nuestra aplicación, la extensión la API File: Directories & System provee las herramientas para trabajar con un pequeño sistema de archivos creado específicamente El gran libro de HTML5, CSS3 y Javascript 240 para cada aplicación, y la extensión API File: Writer es para escribir contenido dentro de archivos que fueron creados o descargados por la aplicación.

Para leer archivos en el ordenador de los usuarios tenemos que usar la interface FileReader. Esta interface retorna un objeto con varios métodos para obtener el contenido de cada archivo:

readAsText(archivo, codificación) Para procesar el contenido como texto podemos usar este método. Un evento load es disparado desde el objeto FileReader cuando el archivo es cargado. El contenido es retornado codificado como texto UTF-8 a menos que el atributo codificación sea especificado con un valor diferente. Este método intentará interpretar cada byte o una secuencia de múltiples bytes como caracteres de texto.

readAsBinaryString(archivo) La información es leída por este método como una sucesión de enteros en el rango de 0 a 255. Este método nos asegura que cada byte es leído como es, sin ningún intento de interpretación. Es útil para procesar contenido binario como imágenes o videos.

readAsDataURL(archivo) Este método genera una cadena del tipo data:url codificada en base64 que representa los datos del archivo.

readAsArrayBuffer(archivo) Este método retorna los datos del archivo como datos del tipo ArrayBuffer.

DEMOSTRACIÓN

En Visual Studio vamos a dar click en menú File à New à Project

En la Ventana emergente le damos click a Web y espacio Name colocamos el nombre del proyecto que para el Ejemplo es “Demo 8 20480” y luego presionamos el botón OK

Le damos click a OK y Nos aparecerá la siguiente ventana donde Seleccionamos Emty y tildamos la opción de WebForm:

Al dar click en OK, En el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “FileReader.html”, para luego presionar el botón Add.

En el panel de proyectos vamos a crear una carpeta llamada Scripts y agregamos el archivo que contiene las bibliotecas de JavaScript, y una de Imagen donde colocaremos un archivo de imagen cualquiera.