CODEWITHSUNDEEP
javascriptdropzone.js
grundig
grundig

Reputation: 101

Send dropzone thumbnail to server

is there a possibility to send the generated Dropzone.js thumbnail to the server?

I have already tried the "sending" event, but there I have no access to the thumbnail:

myDropzone.on('sending', function(file, xhr, formData) {

});

Threre is also a "thumbnail" event but there I have no access to the formData:

 myDropzone.on('thumbnail', function(file, dataUrl) {

    });

EDIT @mirata I changed a few things in the dropzone.js file:

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    file.fid = responseText;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
  }
  [...]
};

I have added "file.fid = responseText;" to store the server response (in my case, the fileid) (should be on line 1356, Dropzone.js v4).

And on line 309, "file.thumbnail = dataUrl;"

[...]
thumbnail: function(file, dataUrl) {
    var thumbnailElement, _i, _len, _ref;
    if (file.previewElement) {
      file.thumbnail = dataUrl;
      file.previewElement.classList.remove("dz-file-preview");

      [...]
    }
  },
[...]

finally I save my thumbnails with the "success" event:

myDropzone.on('success', function(file) {
    $.ajax({
        url: 'url',
        method: 'post',
        data: {
            fileId: file.fid,
            thumbnail: file.thumbnail
        }
    });
});

Hope this helps!

Upvotes: 2

Views: 4433

Answers (2)

Taron Saribekyan
Taron Saribekyan

Reputation: 1390

It is not correct way to make changes directly in plugin (in that case you can not update your plugins or include them using f.e. npm or bower). You must override plugin or try to solve problem using plugin functionality (Dropzone provides a lot of events).

One version:

Disable autoProcessQueue on plugin init:

autoProcessQueue: false

And process images queue after thumbnail creating:

myDropzone.on('thumbnail', function(file, thumb) {
    file.thumbnail = thumb;
    myDropzone.processQueue();
});

And before sending image include thumbnail too:

myDropzone.on('sending', function(file, xhr, formData) {
   formData.append('thumbnail', file.thumbnail);
});

So instead of making additional request for sending thumbnail, you send it with original image.

Upvotes: 2

mirata
mirata

Reputation: 21

I'm having a similar problem. 'Sending' seems to happen first, followed by 'thumbnail' which is done on a separate thread. This means that the thumbnail could be generated in the background at any point before or after the upload is completed. Not ideal for us.

What we really need is a way to trigger the thumbnailing process and have it finish before sending to the server, or figure out how to send the thumbnail as a secondary operation, and know what record the thumbnail needs to be stored against.

If I figure something out, I'll add it here.

Upvotes: 0

Related Questions