0

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>

1 respuesta 1

0

Ya he logrado encontrar la solución, tengo que añadir al file que se acaba de subir un listent y asi detecta el click, asi tambien puedo añadir el data que requiera y enlazar directamente con el campo de crear descripción.

var dropzoneCaseUse;
jQuery(document).ready(function() {
    Dropzone.autoDiscover = false;
    dropzoneCaseUse = $("#dropCaseUse").dropzone({
       url: "ajaxfile.php",
       success: function (file, response) {
          if(response != 0){
            var imgName = response;
            file.previewElement.classList.add("dz-success");
             // Download link
             var anchorEl = document.createElement('a');
             anchorEl.setAttribute('href',response);
             anchorEl.setAttribute('target','_blank');
             anchorEl.innerHTML = "<br>Download";
             file.previewTemplate.appendChild(anchorEl);
          }
            // Aqui el listener
            file.previewElement.addEventListener("click", function() {
                console.log(this);
            });
       },
       error: function (file, response) {
       file.previewElement.classList.add("dz-error");
       }
    });

    Dropzone.options.dropzoneCaseUse = {
        uploadMultiple: true,
        paramName: "file",
        acceptedFiles: ".png,.jpg,.jpeg",
        clickable: true,
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        timeout: 180000,
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log("uploaded"); //debuging the upload
            done();
        },
    }

})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css"/>

<div class="dropzone">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.