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: