CODEWITHSUNDEEP
javascriptdropzone.js
Jake N
Jake N

Reputation: 10583

Dropzone JS Global Events

I might have this wrong but Dropzone JS seems to do things in a very odd way. http://www.dropzonejs.com/#events

This is the recommended method of adding an event

Dropzone.options.myAwesomeDropzone = {
  init: function() {
    this.on("addedfile", function(file) { alert("Added file."); });
  }
};

This assumes you know what myAwesomeDropzone is. But if you create them programatically then you may not know what myAwesomeDropzone is. It could be anything, e.g. if you have three different Dropzones on the page based on some ID then the identifier won't be myAwesomeDropzone or even guessable.

It would be handy to be able to do 

$(".dropzone").on("addedfile", function(file) {
    alert("hello");
});

But it does not work. I just want to be able to attach a global event to all my dropzones.

Upvotes: 0

Views: 2048

Answers (3)

Jake N
Jake N

Reputation: 10583

The below works, my issue was that I had dropzone.js included twice which made Dropzone.autoDiscover = false; be ignored.

Dropzone.autoDiscover = false;

$(".dropzone").on("addedfile", function(file) {
    alert("hello");
});

Upvotes: 0

wallek876
wallek876

Reputation: 3259

If you have several dropzones in the same page, and you need for each one to have a different configuration, you have to initialize each one separately. As I see you are using jQuery know that you can also initialize the dropzone elements using the Dropzone jQuery plugin already included in dropzone.

As example imagine that each dropzone accepts a different file type:

Dropzone.autoDiscover = false;

$("#dropzone1").dropzone({
  url: 'urlForDropzone1.php', 
  acceptedFiles: 'application/pdf',
  init: function(){
    this.on("addedfile", function(file) { 
    alert("Added" + file.name + " on Dropzone 1."); 
    }),
    this.on("success", function(file) {
        alert(file.name " Uploaded from Dropzone 1")
    })
  }
});

$("#dropzone2").dropzone({
  url: 'urlForDropzone2.php', 
  acceptedFiles: 'image/*,.jpeg,.jpg,.png,.gif',
  init: function(){
    this.on("addedfile", function(file) { 
    alert("Added" + file.name + " on Dropzone 2."); 
    }),
    this.on("success", function(file) {
        alert(file.name " Uploaded from Dropzone 2")
    })
  }
});

Notice that first you need to disable the autodiscover feature, then initialize each dropzone separately, the url are optional, don't need to include them if you already have them in the html.

Upvotes: 1

Bernie
Bernie

Reputation: 5055

You can append dropzone very similar as in your 2nd snippet. When you attach the configuration directly when initializing the dropzone.

  new Dropzone(".dropzone", {
                    url: 'someUrl',
                    addedfile: function () {
                        alert('Hallo');
                    }
                });

Upvotes: 0

Related Questions