Estoy haciendo uso de la libreria dropzone y necesito detectar el click en el thumbnail para añadir una descripcion para la imagen y tener un identificador o una relación entre descripcion e imagen, si esto no existe habria alguna manera de personalizar los thumbnails y añadir un nuevo elemento data?
Este es el codigo js y html usado:
Dropzone.autoDiscover = false;
var dropzoneCaseUse = $(".dropzone").dropzone({
url: "ajaxfile.php",
success: function (file, response) {
if(response != 0){
// Download link
var anchorEl = document.createElement('a');
anchorEl.setAttribute('href',response);
anchorEl.setAttribute('target','_blank');
anchorEl.innerHTML = "<br>Download";
file.previewTemplate.appendChild(anchorEl);
}
}
});
Dropzone.options.dropzoneCaseUse = {
uploadMultiple: true,
paramName: "file",
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 200,
thumbnailHeight: 200,
autoProcessQueue: false,
accept: function(file, done) {
console.log("uploaded"); //debuging the upload
done();
},
init: function() {
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" integrity="sha256-iDg4SF4hvBdxAAFXfdNrl3nbKuyVBU3tug+sFi1nth8=" crossorigin="anonymous" />
<div class="dropzone">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js" integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8=" crossorigin="anonymous"></script>