CODEWITHSUNDEEP
javascriptjquerydropzone.js
Stéphane Ammar
Stéphane Ammar

Reputation: 1454

Dropzone.js thumbnail event

I am using the JQuery framework "Dropzone.js" to upload files on server.

I want to do some stuff when the thumbnail is displaying. The other things are working without issue. The DOM is displaying before the javascript call.

I tried to initiate the thumbnail in two ways, according to Dropzone.js documentation :

  var dz = new Dropzone(
   'div#'+id,
    {
    init: function() {
       this.on("thumbnail", function(file) {console.log("thumbnail") });
    },
...
  }

and : 

var dz =  new Dropzone(...);
dz.on("thumbnail", function(file) {
    console.log("thumbnail")
  });

And nothing is displaying in my browser console when I drop a file in the dropzone. The most weird behaviour is that when I write the same things with the event addedfile (dz.on("addedfile", ... or in the init parameter), I have the correct behaviour : I have something written in the console when a file is added.

Note that I want to modify dynamically the thumbnail when it is created, and this is why I can't use other event.

I use a custom previewTemplate in my Dropzone object; I don't think that cause the issue, but in the doubt I post what I wrote for this parameter too:

previewTemplate : '<div class="dz-preview dz-file-preview ">'
 + '<div class="dz-details">'
   + '<div class="dz-cancel" title="Supprimer">X</div>'
   + '<div class="dz-filename"><span data-dz-name></span></div>'
   + '<div class="dz-size" data-dz-size></div>'
 + '</div>'
 + '<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span><span class="dz-upload-text" data-dz-uploadprogress></span></div>'
 + '<div class="dz-error-message"><span data-dz-errormessage></span></div>'
+ '</div>',

If someone has an idea of what is happening and how can I resolve it, I thank a lot !

Edit after comments

Ok, then, thanks for all for your comments. I think I know where I misunderstood; and reading more carefully the doc, that was the point :

They do stuff like: create a new HTML element, add the element when provided with image data (with the thumbnail event),

This event is only fired when we want to display an image in the thumbnail; but what I am doing is a thumbnail without image (just the name of the file and the size). And that's right that when I add the createImageThumbnails flag and the <img data-dz-thumbnail /> in the template, the event is triggered when I add an image file in the drop zone.

So, my new question is: how to display an event when a free-image thumbnail is created ? I thought in using the uploadprogress event but it is not triggered when the file is not sent (for example, when activating a max file size limit).

Upvotes: 3

Views: 6135

Answers (1)

Hexodus
Hexodus

Reputation: 12927

I'm not sure that your using it in the right way. I would try the following approach: 

var dz =  new Dropzone(...);

Dropzone.options.dz = {
 init: function() {
    this.on("thumbnail", function(file) { console.log("thumbnail") });
  }
};

If the event does what you expect it to do is a different matter.

Upvotes: 0

Related Questions