Clear up AjaxToolkit AsyncFileUpload control

Question

I am using an AsyncFileUpload control in my aspx.net page. This control is running inside an update panel.

I can successfully upload files to the server asynchronously.

My problem is that I can't refresh the entire page after each file is uploaded, so I need to figure out how to clear up the last uploaded file, so when the user selects a new file to upload, the old file does not appear in the control and the control does not keep its last upload in ViewState.

I have tried this http://www.aspsnippets.com/Articles/Clear-contents-of-AsyncFileUpload-Control-after-upload-and-page-revisit.aspx but it only clears up the html, when I do the server async postback, the AsyncFileUpload control still has the last file uploaded.

Is there a way to do the clean up at server side? Perhaps anything related to view state?

Any help would be appreciated, Thank you.

Answer 1

On the client side you can use OnClientUploadComplete event to clear up the last uploaded file entry. Once the file uploading is completed and when the postback occurs the AsyncFileUpload1.HasFile will return false.

In aspx page:

<asp:AsyncFileUpload ID="AsyncFileUpload1" OnClientUploadComplete="success" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" runat="server" />

and inside JavaScript tags:

function success() {         
    var fu = document.getElementById("AsyncFileUpload1"); 
    document.getElementById("AsyncFileUpload1").innerHTML = fu.innerHTML; 
} 

Answer 2

This worked for me :

function ClearFile() {
    $('input[type="file"]').each(function () {
        $("#" + this.id).replaceWith($("#" + this.id).clone(true));
    });

    //For other browsers
    $('input[type="file"]').each(function () { $("#" + this.id).val(""); });
}