CODEWITHSUNDEEP
javascriptjqueryfile-upload
Jasper Kennis
Jasper Kennis

Reputation: 3062

How to properly unbind callbacks from jQuery File Upload?

I'm using the jQuery File Upload plugin. I initialise the plugin like this:

var _this = this;

_obj = {
  autoUpload: true,
  maxFileSize: 1000000 // 1mb
};

FileProofer.$uploadform.fileupload(_obj)
  .bind('fileuploadprogress', function (e, data) {
    _this.handleFileProgress(data);
  }).bind('fileuploadadded', function (e, data) {
    _this.checkAddedFiles(data);
  })

and then later I detach it with:

FileProofer.$uploadform.fileupload('destroy');

According to the documentation, this should remove all event listeners. However, when I run the same initialisation code again, I can see fileuploadadded is attached double (I use console.log inside _this.checkAddedFiles).

So it seems like the destroy call isn't really working. Am I doing something wrong here?

Some background info for those who are interested: The reason I'm reattaching the fileuploader is that I'm trying to reuse the same html for different products in a shoppingcart.

Upvotes: 2

Views: 768

Answers (1)

sequielo
sequielo

Reputation: 1631

Calling <object>.fileupload('destroy') will only dettach the following events:

    _destroyEventHandlers: function () {
        this._off(this.options.dropZone, 'dragenter dragleave dragover drop');
        this._off(this.options.pasteZone, 'paste');
        this._off(this.options.fileInput, 'change');

according to: https://github.com/blueimp/jQuery-File-Upload/blob/093ec8dfe2eac5e56469ec9e1f6a2af321f4ab0d/js/jquery.fileupload.js#L1308

So, researching a bit more, you'll see that there is a cleanData function that removes the events!

$.cleanData( $('#fileupload') );

Source: https://github.com/blueimp/jQuery-File-Upload/blob/098b507770581d2c8b037fa0a747ff02eb45a329/js/vendor/jquery.ui.widget.js

Hope this could help.

Upvotes: 3

Related Questions