dropzone.js only binds to first element matching the selector

69 views Asked by At

I am declaring dropzones imperatively:

var myDropzone = new Dropzone('*[data-elementtype="ainote_dropzone"]', { url: 'someurl', ai_id: '', text: '',
        init: function() {

          let thisDropzone = this;

          this.on('sendingmultiple', function(file, xhr, formData){
            formData.append('ai_id', thisDropzone.ai_id);
            formData.append('text', thisDropzone.text);
          });

          this.on('complete', function() {
            this.removeAllFiles()
          });

        },
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        addRemoveLinks: true,
        previewsContainer: '#ainote_dropzone_previews'
    });

I have two divs on the page that match the selector. I want both to act exactly the same way. Anyway, only the one that comes first in the HTML code works. When I remove the first one, the other one starts working.

Is this normal behaviour? I believe it should be possible to bind one Dropzone instance to several divs, right?

0

There are 0 answers