Fileupload uploads files multiple times

Question

I'm having a strange problem using the jquery blueimp fileupload on an asp.net website. After some trial an error i have it up an running without much problem, and it's working more or less properly. However, there's some strange behaviour i can't work out. As the norm with any jquery plugins, it has to be initialized once the page loads. However, i can't use a regular $(document).ready due to the fact the webform it has to be used in contains multiple updatepanels, hence i need to use a pageLoad function in order to keep the plugin initialized after any hidden postback the updatepanel may fire. Now, the strange behaviour comes once i do an upload. If i do any other action in the webform (causing an action from the update panel) the next file i try to upload is uploaded twice. If i do yet another action, the next file i upload is uploaded 3 times, etc.

Trying to destroy the plugin on every pageLoad seems to make no difference. And initializing it inside a $(document).ready makes no effect, since this only happens on the very first form load. Any ideas?. Thanks

Answer 1

Yeah, i solved it, sorry, i forgot i had asked it in here so i didnt come back to post an answer, so anyone suffering a similar problem who may end here could read it.

The trick is calling destroy on the plugin not on every pageLoad event, but right at the start of the request. As usual, asp.net updatepanels and jquery are quite tricky when they gotta work together.

Doing something like

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(pageBeginRequest);
function pageBeginRequest() {
    $('#fileupload').fileupload();
    $('#fileupload').fileupload('destroy');   
}

will make sure the plugin is destroyed, so it's fresh again on the pageLoad, avoiding the events being binded multiple times. That's why the files get uploaded as many times as partial postbacks have taken place.