Como modificar el DOM de un thumbnail en Dropzonejs

Dropzonejs es una de esos plugins que podemos utilizar para hacer uploads de archivos haciendo click en determinada área o arrastrando múltiples archivos en una zona de nuestra web, buena documentación y al parecer una buena comunidad, lo conozco de algunos años atrás, pero no me animaba a utilizarlo porque claramente dice IE10+ .. y bueno, mis usuarios ahora utilizan 11 así es que vamos a darle y si han llegado hasta aquí es porque buscan entender como hacer pequeños hacks fuera de lo que normalmente ofrece esta librería.

Implementé sin problemas el plugin, pero como se darán cuenta hay algunas cosas que no se hacen de manera automática, a que me refiero con esto, pues que al realizar una carga de archivos, los thumbnails se generan del lado del cliente y no con la respuesta del servidor, a lo que voy es que el evento thumbnail se ejecuta primero que el success (este último es el que escucha las respuesta de nuestro servidor).

Básicamente la idea es dejar que se pinte el thumbnail y una vez que tienen la respuesta, modificar el DOM utilizando el parámetro file.previewTemplate, si consiguen llegar a ese parámetro ya tienen todo resuelto, aquí un rápido ejemplo.

Dropzone.options.myDropzone = {
	init: function() {
		self.on('success', function(file, data) {
			var response = $.parseJSON(data);
			var el = file.previewTemplate; 
			$(el).find('img').attr('data-id', response.id);
			file.id = response.id;
		});
	}
};

En realidad todos los eventos reciben el parámetro file, incluso si ven en mi ejemplo, al finalizar la adición del data-id en la etiqueta img, verán que agregué un parámetro más al objeto, un “id”, que luego les podría servir para eliminar los archivos cargados en el servidor, ya que por lo que noté en los ejemplos, en el evento “removedfile” lo que se envía es el nombre del archivo y no un identificador como idealmente se debería de hacer.

Así es que si decidieran eliminar un elemento a través del evento removedfile, sería más fácil ahora que tienen el id formando parte de las propiedades de su objeto.

self.on('removedfile', function(file) {
    $.ajax({
        url: '/url/delete/' + file.id,
        type: 'DELETE',
        success: function(data) {
            console.log(data);
        }
    });
});

Espero que se animen a utilizar este plugin que dicho sea de paso no necesita jQuery u otra librería, aunque yo como pueden observar en mi ejemplo lo he utilizado para facilitar el trabajar con el DOM.

Les dejo el enlace del proyecto y otro para que vean que tal funciona.

http://dropzone-express-fileupload.nodejitsu.com/
http://www.dropzonejs.com/

Happy Coding! 🙂

Jack Fiallos

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..