DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-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

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

Explicamos como obtener los tokens de autenticación desde la página de desarrolladores de Facebook, descargar la SDK de Facebook para PHP, solicitar los permisos, autenticarse y publicar un post en el muro de Facebook.

Andrés Cruz 27-06-2016

Acortar enlaces con shorte.st y el curl en PHP

Acortar enlaces con shorte.st y el curl en PHP

En esta entrada veremos cómo acortar nuestros enlaces de manera automática empleando la API de shorte.st y realizar una petición personalizada con el curl en PHP.

Andrés Cruz 18-02-2016

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015