Resulta indispensable para las aplicaciones web que manejen un alto volúmenes de archivos al momento de su carga por parte del usuario; poder validar o verificar los datos del archivo que lo conforman el archivo; antes teníamos que cargar el archivo para que desde el lado del servidor realizar estas validaciones; ahora también es posible realizar parte de estas validaciones desde el lado del cliente con la API de archivos en JavaScript.

Hasta la fecha se han hablado de algunas APIs JavaScript que permiten realizar múltiples funciones y que sin ellas sería muy dificiles de hacer; ahora veremos cómo trabajar con parte de la API de archivos en JavaScript; veremos como se puede obtener datos de archivos que se encuentren cargados localmente a través del input type="file" y derivados.

Propiedades de la API de archivos en JavaScript

Una vez que el usuario realice la carga correspondiente de los archivos, podemos emplear la API de archivos en JavaScript para consultar datos de los archivos cargados; datos como extensión, MIME, tamaño del archivo y de esta forma validar fácilmente que tenga el formato que se especifique:

• File.Name: Retorna el nombre del archivo (solo lectura).
• File.Size: Retorna el tamaño del archivo (solo lectura).
• File.lastModifiedDate: Retorna la última modificación realizada al archivo (solo lectura).

En resumen, la API de archivos en JavaScript permite realizar multitud de operaciones con cualquier archivo que podamos cargar imágenes, archivos en texto plano, doc, etc.

Verificando la compatibilidad con el navegador

Al ser una tecnología provista a partir de la API de HTML5 puede sufrir cambios de una versión a otra de los navegadores; por lo tanto, es necesario validar que el navegador realmente cuente con el soporte correspondiente a esta API.

Para verificar la compatibilidad podemos emplear el siguiente código JavaScript:

if (!(window.FileList)) {
    console.log('La API FileList no está soportada');
    return;
}

Se referencia el objeto Filelist aunque este no se emplee directamente por este nombre, permite retornar una lista de los archivos seleccionados (por ejemplo) en un input type="file".

Obteniendo información de la constitución de los archivos

Garantizado el soporte por el navegador, ahora podemos estar seguro que el navegador cuenta con soporte a las propiedades listadas anteriormente.

Obteniendo acceso a los archivos de usuario

El método más común para cargar los archivos en un aplicación es mediante el uso de la etiqueta input type="file"; una vez cargador con ayuda de la API de archivos podemos obtener un lista de archivos cargados por el usuario su información.

La API de archivos soporta al 100% el atributo multiples presentes en la etiqueta input type="file".

Mostrando los datos de archivos cargados en un input type="file" multiple

El siguiente ejemplo permite mostrar la distinta información obtenible mediante la API de archivos seleccionados por un input type="file" multiple:

if (!(window.FileList)) {
    console.log('La API FileList no está soportada');
    return;
}

var files = document.getElementById('files').files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
    output.push('<li>', escape(f.name), '(', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

Ver ejemplo Descargar

Mostrando los datos de archivos cargador mediante Drag and Drop

El siguiente ejemplo es una variación del anterior, y podemos emplear el Drag and Drop para la carga del archivo y posteriormente mostrar la información del archivo:

    function drop(event) {
        event.stopPropagation();
        event.preventDefault();

        if (!(window.FileList)) {
            console.log('La API FileList no está soportada');
            return;
        }

        var files = event.dataTransfer.files;

        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li>', escape(f.name), '(', f.type || 'n/a', ') - ',
                    f.size, ' bytes, última modificación: ',
                    f.lastModifiedDate.toLocaleDateString(), '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }
    function dragenter(event) {

        event.stopPropagation();
        event.preventDefault();
    }

    function dragover(event) {
        event.stopPropagation();
        event.preventDefault();
    }

    var contenedor = document.getElementById("contenedor");

    contenedor.addEventListener("dragenter", dragenter, false);
    contenedor.addEventListener("dragover", dragover, false);
    contenedor.addEventListener("drop", drop, false);

Ver ejemplo Descargar

Conclusiones

Y esto es todo por ahora, continuaremos hablando de la API de archivos más adelante ejemplificando su uso al momento que no solo podemos listar información del archivo, si no también abrirlos para la lectura de los mismo.

Enlaces de interés

• Cómo leer archivos en JavaScript a través de las API de archivos
• MDN: File