Блог

Я хотел бы знать, как запустить Dropzone.js ‘ввод для загрузки файла по умолчанию? Это не так просто, как это:

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

Теперь у меня нет никаких идей. В любом случае весь #dropCloud контейнер скрыт, если это имеет значение.

Просто. В версии 4.0 вы можете сделать:

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

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

Кажется, это отлично работает для меня

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

У меня была такая же проблема, и после долгих попыток я, наконец, нашел способ добавить дополнительные интерактивные области в существующую форму загрузки DropZone.

Примечание: должна быть хотя бы одна «оригинальная» интерактивная область, изначально прикрепленная clickable параметром.

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

В основном то, что я делаю, это

1. Добавьте новый интерактивный элемент DOM в DZ.clickableElements .
2. Клонируйте последний DZ.listeners объект массива.
3. Замените element свойство в new_listener объекте на наше.
4. Добавьте оба new_clickable и new_listener вернитесь к DZ.
5. Вызов DZ.disable() и DZ.enable() который повторно подключает все обработчики событий.

Вздох… Я думаю, что это самое уродливое решение, которое я сделал… Во время запуска init fn.

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

Есть идеи получше?

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

});