Dropzone.js - Как подключить интерактивную кнопку загрузки (добавить кнопку) динамически

Question

С помощью dropzone.js для загрузки файла drag'n'drop я хотел бы добавить динамическую загрузку файла.

На странице есть список заказов. Когда вы выбираете заказ, он загружается через вызов Ajax и отображается. Я создаю Dropzone на document.body при загрузке страницы, чтобы отказать в загрузке с дружественным сообщением об ошибке до тех пор, пока не будет выбран заказ. Когда заказ загружен, кнопка добавления отображается с порядком, и я хотел бы добавить обработчик кликов Dropzone к этой динамически созданной кнопке. Кнопка будет воссоздана каждый раз, когда выбран новый порядок.

Я просто не могу понять, как установить/изменить clickable Вариант Dropzone после создания Dropzone.

var documentDropzone = new Dropzone(document.body, { 
    url: '/path/to/upload.php', 
    clickable: false, 
    init: function() { 
    this.on('sending', function(file, xhr, formData) { 
     var order_id = parseInt($('#dropzone_order_id').val(), 10); 
     formData.append('order_id', order_id); 
    }); 
    }, 
    accept: function(file, done) { 
    if (parseInt($('#dropzone_order_id').val(), 10)) done(); 
    else { 
     showErrorMessage('Please select an order first'); 
     done('error'); 
    } 
    }, 
    success: function(file, response) { 
    // handle response 
    } 
}); 

$(document).on('click', '.view-opener', function(event) { 
    event.preventDefault(); 
    $('#view-order').remove(); 
    var view = $('<div id="view-order"></div>') 
    .prependTo('#inner-container-top'); 
    view.load(this.href, function(){ 

    // This is the failing line of code. The #dropzone-click-target 
    // is a button that is loaded with this ajax call. 
    // (It also contains a hidden input with #dropzone_order_id 
    // which enables the upload functionality.) 
    Dropzone(document.body, {clickable: '#dropzone-click-target'}); 

    }); 
}); 

скрипку доступна здесь:

http://jsfiddle.net/tomas_eklund/761qr3r5/

Answer 1

Просматривая исходный код dropzone.js я нашел недокументированные destroy() метод. Используя это в сочетании с объектом многоразовых опций, я теперь уничтожаю и воссоздаю Dropzone для каждого загруженного нового заказа.

Так при загрузке страницы я создаю эту Dropzone (что не будет ничего загружать, но отказываются все файлы корректно):

var dropzoneOptions = { clickable: false /* see Question ... */ }; 
var documentDropzone = new Dropzone(document.body, dropzoneOptions); 

Внутри моего «.view-нож» нажмите обработчик, после вызова AJAX, который загружает выбранный заказ, я добавил этот код, который уничтожит предыдущий объект Dropzone, увеличить объект опции и создать новый экземпляр Dropzone:

documentDropzone.destroy(); 
dropzoneOptions.clickable = '#dropzone-click-target'; 
documentDropzone = new Dropzone(document.body, dropzoneOptions); 

Я также обновил JS скрипку: http://jsfiddle.net/tomas_eklund/761qr3r5/39/