Clear ajax asyncfileupload textbox after file upload in asp.net

on
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

Comments

Post a Comment