CODEWITHSUNDEEP
jquerydropzone.js
Tomas Eklund
Tomas Eklund

Reputation: 633

Dropzone.js - How to attach clickable (upload button) dynamically

Using dropzone.js for drag'n'drop file upload, I would like to attach a file upload button dynamically.

The page has a list of orders. When you select an order it is loaded through an Ajax call and shown. I instantiate Dropzone on the document.body at page load, in order to refuse uploads with a friendly error message until an order has been selected. When an order has been loaded an upload button is rendered with the order, and I would like to attach the Dropzone click handler to this dynamically created button. The button will be recreated every time a new order is selected.

I just can't seem to figure out how to set/change the clickable Dropzone option after the Dropzone has been created.

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'});

  });
});

A fiddle is available here:

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

Upvotes: 5

Views: 25471

Answers (1)

Tomas Eklund
Tomas Eklund

Reputation: 633

By scanning the dropzone.js source code I found an undocumented destroy() method. Using this in conjunction with a reusable options object I am now destroying and recreating the Dropzone for each new order loaded.

So on page load I create this Dropzone (that will not upload anything but refuse all uploads gracefully):

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

Inside my ".view-opener" click handler, after the ajax call that loads the selected order, I've added this code that will destroy the previous Dropzone object, augment the options object and create a new Dropzone instance:

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

I've also updated the JS Fiddle: http://jsfiddle.net/tomas_eklund/761qr3r5/39/

Upvotes: 9

Related Questions