Contenido

Arrastra ficheros de tu web al escritorio gracias a Javascript

27 Ago

+ 5

gMail ha añadido la funcionalidad de permitir arrastrar ficheros de nuestras páginas web directamente al escritorio. Esta funcionalidad, inversa a la que hace unos meses publicaron y que puso en relieve el apoyo de Google al HTML5 y las nuevas funcionalidades javascript. La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas web.

HTML

<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
             application/octet-stream
             :Eadui.ttf
             :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a> 

Como vemos el elemento <a /> se encarga de informar de que el elemento es draggable y además informamos el atributo data- para informar los datos necesarios para la descarga.

Javascript


var files = document.getElementById("dragout"), fileDetail;

if(typeof file.dataset === "undefined") {
	fileDetail = file.getAttribute("data-downloadurl");
} else {
	fileDetail = file.dataset.downloadurl;
}

file.addEventListener("dragstart",function(evt){
	evt.dataTransfer.setData("DownloadURL",fileDetail);
},false);

Si el navegador soporta los atributos data- cogeremos los datos necesarios informados en el HTML anterior, para posteriormente añadirlo al evento dragstart y simular la descarga del fichero con los datos anteriores. Solo apto para navegadores adaptados a las nuevas funcionalidades HTML5. Fácil, simple y potente 😀

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.