aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Clear ajax asyncfileupload textbox after file upload in

Apr 29, 2012

Here I will explain how to clear the Ajax AsyncFileUpload control after upload files to folder or server using


In previous article I explained
Ajax AsyncFileUpload example to upload files using  
During work with Ajax AsyncFileUpload control even after upload files to folder still that is containing the path of the file which is uploaded to folder. To clear the path of file from Ajax AsyncFileUpload we need to write some custom code for that check the below code.
Design your aspx page will be likes this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="">
<head id="Head1" runat="server">
<title>Clear Text in Async FileUpload Control after file upload</title>
<script type="text/javascript">
// This function will execute and clear fileupload control after file uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
var uploadText = document.getElementById('<%=fileUpload1.ClientID %>').getElementsByTagName("input");
for (var i = 0; i < uploadText.length; i++) {
if (uploadText[i].type == 'text') {
uploadText[i].value = '';
// This function will execute if file upload fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
If you observe uploadComplete javascript function in that I written functionality to show message after file upload complete and clearing fileupload control.

Now in code behind add following namespaces

C# Code

using System;
using System.Web.UI;
using AjaxControlToolkit;
After completion of adding namespaces write following code in code behind

protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/") + filename);
VB Code

Imports System.Web.UI
Imports AjaxControlToolkit
Partial Class Default
Inherits System.Web.UI.Page
Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
Dim filename As String = System.IO.Path.GetFileName(fileUpload1.FileName)
fileUpload1.SaveAs(Server.MapPath("Files/") & filename)
End Sub
End Class
Download sample code attached

Reference : ClearAsyncFileUpload

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

superb example..! i really like it.

hermes said...

I will follow this instruction.

Narendra Singh Rathore... said...

how do i clear file from fileupload upload control , when i refresh page it again upload file without clicking on button to upload , any code to clear file from fileupload control

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.