Here I am explaining an issue that I just noticed on the http://forums.asp.net. There the person asked that he was not able to clear the values of the new ASP.Net AJAX Control Toolkit AsyncFileUpload control when the page is revisited, refreshed or reloaded. If you need to know more about using this control, please refer my article
Server Side clearing
AsyncFileUpload control stores the uploaded file in session by creating a unique which is a combination of a GUID and its ClientID combination. Hence after uploading the file you need to clear the contents by deleting that key from Session in the following way
C#
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;
}
}
}
VB.Net
Protected Sub FileUploadComplete(ByVal sender As Object, ByVal e As EventArgs)
Dim filename As String = System.IO.Path.GetFileName(AsyncFileUpload1.FileName)
AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename)
ClearContents(CType(sender, Control))
End Sub
Private Sub ClearContents(ByVal Control As Control)
For i As Integer = 0 To Session.Keys.Count - 1
If Session.Keys(i).Contains(Control.ClientID) Then
Session.Remove(Session.Keys(i))
Exit For
End If
Next
End Sub
Client Side clearing
Now the above technique removes the file from session but it does not clear the textbox of the AsyncFileUpload control
After some research and looking closely how it works I found the trick to clear the contents of the AsyncFileUpload Control. Basically the control comprises of a ReadOnly textbox. I did not find any property to clear the AsyncFileUpload control. Thus I took help of JavaScript programming.
The following JavaScript method clears the contents of the AsyncFileUpload Control
<script type = "text/javascript">
function clearContents() {
var AsyncFileUpload = $get("<%=AsyncFileUpload1.ClientID%>");
var txts = AsyncFileUpload.getElementsByTagName("input");
for (var i = 0; i < txts.length; i++) {
if (txts[i].type == "text") {
txts[i].value = "";
txts[i].style.backgroundColor = "white";
}
}
}
window.onload = clearContents;
</script>
You can call this function wherever you want, above I am calling it on window onload event so that the control gets cleared each time page is reloaded, refreshed or revisited. In case you want to clear it after the file is uploaded on the server call it up on the OnClientUploadComplete event of the AsyncFileUpload control in the following way
<script type = "text/javascript">
function uploadComplete(sender) {
clearContents();
}
</script>
The GIF below describes how this trick clears the ASP.Net AJAX Control Toolkit AsyncFileUpload control when page is refreshed, reloaded, revisited and also once the file is uploaded
Thus using both the client side and server side technique we can actually clear the uploaded file from AsyncFileUpload control. You can download the source code in C# and VB.Net using the download link provided below