Descargar archivos con Drag and Drop

Una de tantas cosas geniales que tiene HTML5, es la capacidad de subir archivos a un sitio web con solo arrastrar y soltar un archivo en el navegador y específicamente en un área, esto ha hecho que sea muy intuitivo para el usuario, pero es solo aplicado para subir más no para descargar, Google se planteo lo mismo y ha publicado una forma de hacerlo.

Lista de atributos para el enlace de descarga

Realmente es muy sencillo hacer esto y solo es cuestión de adaptar enlaces con atributos que permiten al navegador saber que archivo es y donde esta, estos son los atributos:

• Href: Para enlazar el archivo normalmente.
• Class: Esto sirve para estilos y uso en JavaScript si son varios archivos.
• Data-downloadurl: Para especificar el MIME, NOMBRE y URL absoluta del archivo.
• Draggable: Para especificar si se podrá arrastrar.

Ahora, para explicar mejor el atributo Data-downloadur, debemos saber que consta de 3 partes:

• MIMETYPE: El tipo de MIME del archivo, por ejemplo un PDF tiene como mime ‘application/pdf’.
• Filename: Es el nombre del archivo junto con la extensión, por ejemplo ‘mi_cancion.mp3’
• Absolute_url_to_file: Es la ruta absoluta donde se encuentra el archivo que será descargado.

Ejemplo: <a href=”URL_ARCHIVO” draggable=”true” data-downloadurl=”MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE“>Descargar</a>

Código:

<a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf" class="dragout" 
data-downloadurl="application/pdf:Chrome3DGlasses.pdf:http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf"><img src="pdf-icon.png" alt="Archivo PDF" /></a>

<a href="http://farm4.staticflickr.com/3117/5709861595_1af8bb351c_o.jpg" class="dragout" 
data-downloadurl="image/jpg:foto.jpg:http://farm4.staticflickr.com/3117/5709861595_1af8bb351c_o.jpg"><img src="jpg-icon.png" alt="Archivo JPG" /></a>

Nuevas funciones de JavaScript

Para hacer posible esto, nos han proporcionado unas sencillas funciones que nos permiten escuchar cuando el usuario arrastra un archivo disfrazado de enlace y poder ser descargado.

Usaremos un Listener para escuchar el evento dragstart  de un archivo y éste pasará el tipo e información del archivo.

Para que la información del archivo sea correctamente transferida, usamos dataTransfer.setData, tiene 2 parámetros, el atributo y el valor que queremos pasarle, en este caso DownloadURL para que sea correcta la URL donde obtendremos el archivo.

Nota: El código JavaScript debe estar dentro de la etiqueta Body para funcionar.

Código:

(function() {
var files = document.querySelectorAll('.dragout'); // En la variable file guardamos la consulta de todos los enlaces con la clase .dragout
for (var i = 0, file; file = files[i]; ++i) { //Recorremos todos los enlaces para escucharlos con el listenes dragstart
  file.setAttribute('draggable', 'true'); //Aplicamos el atributo draggable para que todos los enlaces sea arrastrables
  file.addEventListener('dragstart', function(evt) { //Escucharmos todos los enlaces que estan en file para que al ser arrastrados se ejecute el siguiente codigo
	evt.dataTransfer.setData('DownloadURL', this.getAttribute('data-downloadurl')); //Al ser arrastrado un enlace o archivo este asigna al DownloadURL el enlace absoluto para que la descarga sea correcta
  }, false);
}
})();

Nota: Posiblemente no funcione con todos los navegadores aun siendo compatibles con HTML5.

Click aqui para ver el ejemplo y para descargar los archivos