如何在单击浏览文件的元素上设置拖放区缩略图？

Question

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.

Answer 1

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')"
    });
});

Answer 2

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.