Dropzone.js varsayılan dosya yükleme girişi nasıl tetiklenir?

Question

Dropzone.js varsayılan dosya yükleme girişini nasıl tetikleyeceğini bilmek ister misiniz? Böyle kadar basit değil:

window.dropCloud = = new Dropzone("#dropCloud", {...}); 
$(window.dropCloud.clickableElements[0]).trigger("click"); 

Şimdi ben herhangi bir fikir yok. Neyse, tüm #dropCloud kapsayıcısı gizlenir.

Answer 1

Off ... ben ... onun çirkin çözüm yaptığım iken init fn çalışan düşünüyorum.

this.clickableElements.push($("#anotherUploadBtn")[0]); 
this.clickableElements.forEach(function(y){ .... 

Daha iyi bir fikir?

Answer 2

Ben aynı sorunu vardı ve çalışırken oldukça zaman sonra, nihayet nasıl varolan dropzone yükleme formuna ek tıklanabilir alanlar eklemek için bir yol buldu.

Not: clickable parametresi tarafından başlangıçta bağlanmış en az bir "orijinal" tıklanabilir alanı olmalı.

var DZ = Dropzone.forElement('.dropzone'); // Change selector to yours 
var new_clickable = $('.new-clickable')[0]; // Change selector to yours 
var new_listener = jQuery.extend({}, DZ.listeners[DZ.listeners.length - 1]); 
new_listener.element = new_clickable; 
DZ.clickableElements.push(new_clickable); 
DZ.listeners.push(new_listener); 
DZ.disable(); 
DZ.enable(); 

Temelde ben ne

1. DZ.clickableElements yeni tıklanabilir DOM öğe ekleyin olduğunu.
2. Clone last DZ.listeners dizi nesnesi.
3. bizimkiyle new_listener nesnede element özelliğini değiştirin.
4. hem new_clickable ve new_listener geri DZ ekle. tüm olay işleyicileri tutunduğunda
5. Çağrı DZ.disable() ve DZ.enable().

Answer 3

Bu beni

var dropZone = new Dropzone($("#yourdropzonedivthinger").get(0), { 
BLAH BLAH BLAH drop zone init stuff 
}); 

//Call this anywhere in your code to manually trigger the dropzone file dialog popup thinger 

dropZone.hiddenFileInput.click(); 

Answer 4

da basit harika çalışıyor gibi görünüyor. sürüm 4.0 yapabileceğiniz:.

new Dropzone(".element", { 
    clickable: '.myTrigger' 
}); 

new Dropzone(".element", { 
    clickable: ['.myTrigger', '.myOtherTrigger'] 
}); 

Answer 5

jQuery("#file-uploader").dropzone({ 
     url: "/upload/", 
     paramName: "file", 
     maxFilesize: 5, 
     acceptedFiles: 'image/*,.jpeg,.jpg', 
     autoProcessQueue: true, 
     clickable: ['#file-uploader *','#file-uploader'], 
     init: function() { 
      this.hiddenFileInput.click(); //opens the file select dialogue 
     }, 
     accept: function(file, done) { 
      // some code 
      done(); 
     }, 
     success: function (file, responseText) 
     { 
      var responseJSON = JSON.parse(responseText); 

      // some code 
     }, 

});