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.

score 6 · Answer 1 · edited Jan 11 '17 at 20:53

6

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; 
}

edited Jan 11 '17 at 20:53

Maria Ines Parnisari

16,584
9
85
130

answered Aug 05 '11 at 02:17

Waqas

6,812
2
33
50

Thanks Waqas! This helped me out today :-) – Svein Erik Apr 16 '12 at 14:39
1

`function success(sender, args) { $(sender._element).find('input').val(''); }` – Scotty.NET Nov 09 '12 at 17:27

score 2 · Answer 2 · edited Jan 11 '17 at 18:32

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(""); });
}

edited Jan 11 '17 at 18:32

Bryan

2,870
24
39
44

answered Nov 01 '12 at 10:02

mzeer

33
5

score 0 · Answer 3 · answered Jul 17 '12 at 10:53

Server side clearing worked for me :

protected void FileUploadComplete(object sender, EventArgs e) 
{
    string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.PostedFile.SaveAs(Server.MapPath("Uploads/") + filename);

    ClearContents(sender as Control);
}

private void ClearContents(Control control)
{
   for (var i = 0; i < Session.Keys.Count; i++)
   {
      if (Session.Keys[i].Contains(control.ClientID))
      {
         Session.Remove(Session.Keys[i]);
         break;
      }
   }
}

reference: link in the question by Fer. http://www.aspsnippets.com/Articles/Clear-contents-of-AsyncFileUpload-Control-after-upload-and-page-revisit.aspx

score 0 · Answer 4 · edited May 23 '17 at 12:00

0

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

and

function success(sender, args) { $(sender._element).find('input').val(''); }

that one works perfectl on all modern browsers, thanks to "Scotty.NET"

edited May 23 '17 at 12:00

Community

1
1

answered Oct 13 '16 at 18:27

user5857507

1
3

Clear up AjaxToolkit AsyncFileUpload control

4 Answers4

Linked