Tengo un elemento como dropzone y otro es una instancia de él; se puede hacer clic en ambos para examinar el archivo.
Quiero establecer una miniatura para ellos en función de cuál hice clic en él para buscar archivos. Por ejemplo, si hago clic en el elemento A para examinar el archivo, me gustaría establecer una miniatura en un elemento A. Del mismo modo, si hago clic en el elemento B para examinar el archivo, me gustaría establecer una miniatura en un elemento b
Esto es lo que he intentado, pero no funcionó:
$(document).ready(function() { var previewTemplate = document.querySelector('#tpl').innerHTML; var default_option = { url: '/upload', method: "post", autoProcessQueue: false, uploadMultiple: true, maxFiles: 2, parallelUploads: 100, thumbnailWidth: 80, thumbnailHeight: 80, timeout: 0, previewsContainer: '.row-thumbnail', previewTemplate: previewTemplate, clickable: '.a, .b' } var myUploadObj = new Dropzone('#myDz', default_option); }); .upload-container { display: flex; } .a, .b { width: 325px; height: 325px; border: 1px solid; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script> <div class="upload-container"> <div class="a" id="myDz"> <div class="dz-message"><span>Element A</span></div> </div> <div class="row-thumbnail dropzone-previews b"> <div class="dz-message"><span>Element B</span></div> </div> </div> <!-- preview template --> <div id="tpl" style="display: none;"> <div class="dz-preview dz-file-preview thumbnail-item"> <div class="dz-image"><img data-dz-thumbnail /></div> </div> </div>Gracias.
Hice algunos cambios en su código y lo probé en este violín aquí . Creo que el concepto que desea lograr es cambiar la propiedad css de un elemento cuando se hace clic en él. Si no quiere jugar con la propiedad de imagen de fondo css , siempre puede usar la propiedad :before o :after para agregar datos antes o después de su etiqueta (elemento).
Esta es la función principal responsable de este comportamiento en el violín.
$('.class To Be Clicked').click(function() { $('.class to be changed').css({ "background-image": "url('url to image here')" }); });El contenedor de vista previa está determinado por la propiedad previewsContainer en el objeto dropzone. Puede echar un vistazo al código fuente relacionado aquí: https://github.com/dropzone/dropzone/blob/main/src/dropzone.js línea 147 - 156
Por lo tanto, solo necesita configurar previewsContainer dinámicamente cada vez que se hace clic en a o b.
$(document).ready(function() { var previewTemplate = document.querySelector('#tpl').innerHTML; var default_option = { url: '/upload', method: "post", autoProcessQueue: false, uploadMultiple: true, maxFiles: 2, parallelUploads: 100, thumbnailWidth: 80, thumbnailHeight: 80, timeout: 0, previewsContainer: '.row-thumbnail', previewTemplate: previewTemplate, clickable: '.a, .b' } var myUploadObj = new Dropzone('#myDz', default_option); $(".a").on("click", function(){ myUploadObj.previewsContainer = document.getElementById("myDz"); }); $(".b").on("click", function(){ myUploadObj.previewsContainer = document.getElementById("preview_b"); }); });Para mantenerlo simple, agregué id a b:
<div class="row-thumbnail dropzone-previews b" id="preview_b">Eso es. Probado en cromo, funciona bien.