Capítulo 4 La API File para manejar archivos

La API File para manejar archivos Otra de las maravillosas API de HTML5 es la de manejo de archivos de la máquina del usuario (JavaScript que se ejecuta en él, no tiene acceso a los archivos del servidor). Dentro de la compatibilidad con los navegadores, fundamental en el desarrollo con HTML5, tenemos la siguiente tabla:

ETIQUETAS Para leer los archivos podemos utilizar la etiqueta <input type=”file”>, pero también los API drag&drop sirven para abrir o procesar un archivo, leer su contenido y los datos propios de éste, como su peso, tipo, etcétera. Se puede restringir el tipo de archivos al subirlo a un servidor, por el tamaño de los mismos o establecer un filtro por fecha de creación. Esta API también modifica y analiza los archivos antes de procesarlos en el servidor, lo cual nos ahorrará muchos dolores de cabeza en la validación de nuestras aplicaciones Web.

4.1 Acceder a un archivo por medio de la etiqueta <input> La forma más tradicional de seleccionar un archivo de la computadora del usuario es por medio de la etiqueta <input>, que por lo general era enviado y procesado con PHP o algún lenguaje de servidor similar. Aquí utilizamos una forma diferente de validar si nuestro navegador tiene implementado la API File, preguntamos por el objeto File y el objeto FileReader. Por medio de un listener detectamos cuando el usuario ha seleccionado un archivo y lo desplegamos.

Lectura del nombre de archivo con la API File

4.2 Leer los atributos de un archivo del usuario Dentro del mismo arreglo tenemos los datos generales del archivo, como son el nombre, su tamaño y el tipo de archivo que el usuario ha seleccionado. En este listado estamos leyendo los datos del archivo en una variable (que en realidad es un objeto JavaScript) y desplegamos los datos como el nombre, el tamaño en bytes y el tipo del mismo en las etiquetas de tipo <p>. Ahora traeremos varios archivos con una etiqueta <input> múltiple.

Lectura de los datos de archivo con la API File

4.3 Selección de varios archivos con la etiqueta <input> Debemos utilizar el atributo múltiple y obtener la información del arreglo por medio de un ciclo. Simplemente generamos una cadena con el ciclo de los archivos elegidos y acumulamos los tamaños de los archivos seleccionados en una variable.

Selección de varios archivos con la etiqueta <input>

4.4 Arrastrar y soltar para seleccionar un archivo En la función de mover el archivo tenemos dos instrucciones importantes: La primera detiene la propagación del evento. En el modelo DOM3 tenemos tres fases en la programación de los eventos: difusión, notificación y “burbuja” o “bubbles”. Con esta instrucción detenemos el paso de las burbujas. La segunda instrucción detiene el comportamiento por omisión de un objeto que es arrastrado. Por ejemplo, cuando arrastramos y soltamos una imagen, el navegador abre la misma en forma independiente, o en algunos casos en una nueva pestaña. Las cadenas arrastradas, en general, se abren como enlaces URL. Con esta instrucción le indicamos al navegador que no ejecute la acción predeterminada.

Selección de varios archivos con la etiqueta <input>

4.5 Crear un filtro por tipo de archivo Una vez que tenemos la información en el arreglo, nos será muy sencillo crear un filtro para seleccionar un tipo de archivo, o un filtro para no enviar los archivos mayores a cierto peso, entre muchas otras validaciones que podemos hacer con la información. Los archivos necesitan estar en la carpeta “dioses”, de lo contrario JavaScript no los encontraría y tendríamos imágenes rotas. Primero, abriremos los archivos de texto, y posteriormente los archivos binarios de imágenes.

4.6 Abrir los archivos de texto seleccionados Para poder abrirlos necesitamos un objeto de tipo FileReader, con el cual podemos abrir y leer su contenido. Por medio del método readAsText() leemos su contenido como texto. Por ser procesos asíncronos —es decir, el programa no se detiene hasta finalizar la lectura, sino que continúa y existe la posibilidad de que no se despliegue la información en forma correcta— necesitamos un controlador de eventos, como onload(). Por medio del objeto FileReader() ya no requerimos saber la carpeta o subdirectorio donde reside el archivo para abrirlo.

4.7 Abrir y desplegar archivos de imágenes El procedimiento para leer un archivo binario, en este caso de imágenes, es muy similar al listado 4.6, pero en este caso necesitamos un objeto de tipo Image, como mostramos a continuación:

4.8 Los eventos en la API File Una API es tan poderosa como sus eventos, y este caso no es la excepción, pues contamos con muchos eventos para poder controlar nuestra carga de archivos. Los eventos que podemos detectar son los siguientes: