How to reinitialize the plugin ?

[Sékine Coulibaly]

Hi,

I'm currently using jQuery-File-Upload from inside a bootstrap modal dialog, containing an "Add a file" button.

The upload works perfectly fine, but I'm getting some trouble reinitializing the whole stuff once the user re-opens the modal.

I wish every time the use reopens the modal, the jQuery-Upload-File GUI could be empty (ie not showing previously sent files).

For this, I thought about :

- initializing the jquery-fileupload on bootstrap show event,

- and then calling fileupload('destroy') on bootstrap close event

I tried this :

$('#providersUploadModal').on('shown.bs.modal', function () {
 $('#fileupload').fileupload({
 // Uncomment the following to send cross-domain cookies:
 //xhrFields: {withCredentials: true},
 url: '/application/third_party/libs/jQuery-File-Upload/server/php/',
 sequentialUploads: true,
 autoUpload: true,
 acceptFileTypes: /(\.|\/)(tgz)$/i,
 maxFileSize: 500000, // 5OO KB
 });


 // Enable iframe cross-domain access via redirect option:
 $('#fileupload').fileupload(
 'option',
 'redirect',
 window.location.href.replace(
 /\/[^\/]*$/,
 '/application/third_party/libs/jQuery-File-Upload/cors/result.html?%s'
 )
 );
});

And then destroy when bootstrap hide event occurs :

// Destroy #fileupload on modal close

$('#providersUploadModal').on('hidden.bs.modal', function () {
 $('#fileupload').fileupload('destroy');
})

This seems not to destroy the previously upload files list, nor delete all event bindinds. I write this because I also tried this : 

// Destroy #fileupload on modal close

$('#providersUploadModal').on('hidden.bs.modal', function () {

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

 $('#fileupload table tbody').children().remove()

})

And from what I can see, although the list is empty, asking for uploading a file prevously uploaded actually adds two more lines in the table without even uploading them.

In my understanding of the Deinitialization paragraph ( https://github.com/blueimp/jQuery-File-Upload/wiki/API#deinitialization ) of the API documentation, the fileupload('destroy') should make it possible to re-initialize the DOM element with fileupload, right ?

Thank you.

Regards

Sekine

[Sékine Coulibaly]

For those striving, last week's Aaron Wardle answer solves this.

Juste use :

$("#fileupload").find(".files").empty();

Regards

[wav...@gmail.com]

Where do I put the code to reset the success queue?  For the Basic Plus UI version, I'm guessing it goes here: 

            // Callback for successful uploads:

            // done: function (e, data) {}, .bind('fileuploaddone', func);

I tried putting it here but not sure if I'm adding it correctly...

[Sheeraz ahmad]

not working for me. I actually uploading the image which works fine. now without refresh the page, click the image upload button again. at this second call, I just want to upload the file selected on the second time. but the file upload plugin triggers two times. therefore I want to empty or reinitialize the plugin.