Wie löst man den Drophole.js Standard-Datei-Upload-Eingang?

Question

Ich würde gerne wissen, wie die Dropzone.js Standard-Datei-Upload-Eingang auslösen? Es ist nicht so einfach, wie folgt aus:

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

Ich habe jetzt keine Ideen. Jedenfalls ist der ganze #dropCloud Container versteckt, wenn es darauf ankommt.

Answer 1

Seufz ... Ich denke, es ist die hässlichste Lösung, die ich gemacht habe ... Während Init Fn läuft.

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

Irgendwelche besseren Ideen?

Answer 2

Ich hatte das gleiche Problem und nach einiger Zeit des Versuchs, fand ich endlich einen Weg, wie man zusätzliche anklickbare Bereiche zum bestehenden DropZone-Upload-Formular hinzufügt.

Hinweis: Es muss mindestens ein "ursprünglicher" anklickbarer Bereich vorhanden sein, der anfänglich durch den Parameter clickable festgelegt wurde.

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(); 

Im Grunde, was ich tun ist

1. zu DZ.clickableElements neuen anklickbaren DOM-Element hinzufügen.
2. Klon zuletzt DZ.listeners Array-Objekt.
3. Ersetzen element Eigentum in new_listener Objekt mit unseren.
4. Fügen Sie sowohl new_clickable als auch new_listener zurück an DZ.
5. Rufen Sie DZ.disable() und DZ.enable(), die alle Event-Handler wieder anfügt.

Answer 3

Dies scheint für mich

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

Einfach gute Arbeit. In Version 4.0 können Sie tun:.

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 
     }, 

});