Aspdotnet-Suresh

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

Introduction:

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

Description:

In previous article I explained
Ajax AsyncFileUpload example to upload files using asp.net.  
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="http://www.w3.org/1999/xhtml">
<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.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<div>
<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>
</div>
</form>
</body>
</html>
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
Demo
Download sample code attached


Reference : ClearAsyncFileUpload

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

Get the latest Asp.net, C#.net, 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

3 comments :

Shashikant Vaidya 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

Other Related Posts

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