Contenido

Drag & Drop + File API + XMLHttpRequest = El futuro de la subida de ficheros

15 dic

+ 10

Ya vimos que la beta 1 de Firefox 3.6 nos ofrecía una buena remesa de nuevos estándares y nuevas implementaciones que harán más interesante la experiencia del usuario frente al navegador. Para ilustrar una de ellas, Mozhacks ha implementado un pequeño ejemplo en el que podremos arrastrar imágenes desde nuestro escritorio diréctamente a nuestro navegador. Todo ello sobre Mozilla Firefox 3.6 Beta X, aprovechándose de la FileAPI (que ya hemos visto antes), el Drag & Drop externo y el archiconocido XMLHttpRequest (objeto culpable del Ajax).

drag_drop_file_api_firefox_3_6
(Ver Imagen)

Automáticamente al arrastrar las imágenes (permite multiselección) aparecerán en la página y así podremos visualizar las imágenes que vamos a subir antes de realmente subirlas. Esto es posible gracias a la nueva API de Ficheros que como vemos más abajo, es muy sencilla de usar:

// Leemos fichero binario
var reader = new FileReader();
reader.onload = function(e) {
 var bin = e.target.result;
 // bin is the binaryString
};
reader.readAsBinaryString(file);

// Subimos fichero como binario
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(bin);

Ver el código, no tiene desperdicio.

  • Fenomenal la técnica!! La subida de ficheros se estaba quedando muy atrás al tener que usar el botón de Examinar… así queda todo mucho más AJAX!

  • La subida de binarios en segundo plano debería estar implementada desde hace años… es una verdadera lástima que “ajax” no soporte esta característica…

    Actualmente hay que echar mano de flash (una caca) o de iframes. Con este segundo consigo el efecto deseado y la verdad es que estoy muy contento.

  • Una pregunta: pero esto son estàntardes de w3.org o de Firefox? Espero que sean del primero… porque si no de nada vale implementar características que sólo valgan para un navegador.

  • =O q bien!, chau “examinar” ^^,

  • Hace algunos días, estuve en el google dev fest que se desarrollo en buenos aires, y nos mostraron estas cosas en exclusiva, junto con las extensiones que iban a lanzarse una semana despues y como desarrollar aplicaciones para google wave.
    Lo que más me gusto de todas las charlas es ver como google cada vez que tenia una iniciativa, se juntaba con sus pares de mozilla, opera y safari para intentar entre todos obtener uan version estandarizada de lo que querían implementar.

    Lo mejor de todo esto es que cuando finalmente estas nuevas tecnologías salgan nativas en las proximas versiones de nuestros navegadores, van a poder usarse mediante las apis de ellos en todos de la misma manera, algo bueno para los que somos desarrolladoers y querramos incluir estos avances en nuestras web apps.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.