Una de las grandes ventajas de HTML5 es que permite implementar en cliente mucha de la funcionalidad que hasta ahora debía soportar el servidor. En el caso concreto del File API proporciona un completo acceso a ficheros. Este artículo hace una buena introducción a sus múltiples posibilidades.
Por nuestra parte vamos a presentar un caso que nos parece especialmente útil: la lectura y el tratamiento de ficheros en el lado del cliente. Se podría aplicar, al menos, en alguno de estos casos:
- Queremos proporcionar una utilidad a nuestros usuarios pero no necesitamos guardar nada en servidor. Por ejemplo, pasar de un formato a otro.
- Tenemos que hacer un prototipo rápido para demostrar algo a un cliente y no queremos complicarnos con despliegues.
- De un fichero de gran tamaño sólo necesitamos extraer algunos datos, que son los que vamos a guardar en servidor.
La ventajas son las siguientes:
- Al evitar carga y descarga de servidor, la respuesta es mucho más rápida.
- Ahorramos recursos en el servidor: sólo alojamos el código que se va a ejecutar en cliente. Esto lo hace escalable hasta el infinito.
- En el caso de los prototipos se puede desplegar en cualquier servidor web estático, como Dropbox.
Nuestro ejemplo
Para ilustrar el artículo vamos a crear una sencilla página que nos permita subir un fichero que contiene fechas en formato americano (mes/día/año) y las cambia por fechas en formato europeo (día/mes/año).
<!DOCTYPE html>
<p>Elige un fichero con fechas en formato americano:</p>
<input id="ficheroTratar" type="file" onchange="trataFichero();" />
<script type='text/javascript'>
function convierteFormatoEuropeo(fechaFormatoAmericano) {
return fechaFormatoAmericano.
replace(/(\d{1,2})\/(\d{1,2})\/(\d{2,4})/g, '$2\/$1\/$3');
}
function toDataUrl(text) {
return 'data:text/plain,' + encodeURIComponent(text);
}
function trataFichero() {
var ficherosSeleccionados = document.getElementById("ficheroTratar").files;
if (ficherosSeleccionados.length > 0) {
var ficheroTratar = ficherosSeleccionados[0];
var fileReader = new FileReader();
fileReader.onload = function(evt) {
var contenido = evt.target.result;
contenido = convierteFormatoEuropeo(contenido)
location.href = toDataUrl(contenido);
};
fileReader.readAsText(ficheroTratar);
}
}
La función tratarFichero obtiene la referencia del fichero a tratar, define el «manejador» de la carga del fichero y lee el fichero como texto. Dentro del manejador es donde lo procesamos, que consiste en una búsqueda de todas las cadenas de fecha y el intercambio de sus dos primeras posiciones.
Este ejemplo concreto “navega” al fichero resultante. Se puede hacer que lo descargue cambiando la “data url” y reemplazando data:text/plain por data:application/octet-stream.
Como siempre, puedes descargarte el código fuente de github.
