DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-01-2016

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:

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>';

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);

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Librería para gestos

Librería para gestos

Algunos artículos que te pueden interesar

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

Primeros pasos con la APi de Soundcloud con JavaScript

Primeros pasos con la APi de Soundcloud con JavaScript

Se explica como emplear la API de Soundcloud para crear widget de canciones en nuestra página web controlar los widgets en base a eventos.

Andrés Cruz 27-04-2017

Sincronizando las secuencias con Bucardo

Sincronizando las secuencias con Bucardo

En esta entrada les mostraré cómo sincronizar las secuencias de una Base de Datos Postgresql empleando Bucardo.

Andrés Cruz 27-08-2015