I have one element as a dropzone and another one is an instance of it; both are clickable for browsing the file.
I want to set thumbnail to them based on which one I clicked on it for browsing file. For example, if I click on element A to browse the file, then I would like to set a thumbnail to an element A. Likewise, if I click on element B to browse the file, then I would like to set a thumbnail to an element B.
Here is what I have tried, but it did not work:
$(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>Thanks.
I made some changes to your code and tested it out in this fiddle here
I think the concept you want to achieve is changing the css property of an element when it is clicked .
If you don't want to play with the css background-image property you can always use the :before or :after property to append data before or after your tag (element).
This is the main function responsible for this behavior in the fiddle
$('.class To Be Clicked').click(function() {
$('.class to be changed').css({
"background-image": "url('url to image here')"
});
});
The preview container is determined by the previewsContainer property in the dropzone object. You can take a look at the related source code here - https://github.com/dropzone/dropzone/blob/main/src/dropzone.js line 147 - 156
So you just need to set previewsContainer dynamically whenever a or b is clicked.
$(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");
});
});
To keep it simple, I added id to b:
<div class="row-thumbnail dropzone-previews b" id="preview_b">
That is it. Tested in chrome, works fine.