In this article we will explore how to use AsyncFileUpload of ajaxcontroltoolkit and clear the content of asyncfileupload text box.
Let's see how we can do this.
Step 1: Register ajaxcontroltoolkit.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Step 2: Add AsyncFileUpload control in the aspx page.
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="UploadError" OnClientUploadComplete="UploadComplete" CompleteBackColor="White" UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="imgLoader" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" UploadingBackColor="LightSkyBlue"/>
<asp:Image ID="imgLoader" runat="server" src="loader.gif" />
OnClientUploadError - This javascript event triggers when there is error in uploading a file.
OnClientUploadComplete - This javascript event triggers when file upload is complete.
ThrobberID - It is used to show busy image while upload is in progresss.
OnUploadedComplete - This server side event is used to save the file.
Step 3: Now place below javascripts in the aspx page.
< script type="text/javascript" language="javascript">
function UploadError(sender, args) { alert(args.get_errorMessage()); }
function UploadComplete(sender, args) { alert("File Name: " + args.get_fileName()); alert("File Path: " + args.get_path()); alert("Length of file: " + args.get_length()); alert("Content Type of file: " + args.get_contentType());
//Clear the file name textbox
var ctrlText = sender.get_element().getElementsByTagName("input"); for (var i = 0; i < ctrlText.length; i++) { if (ctrlText[i].type == "text") { ctrlText[i].value = ""; ctrlText[i].style.backgroundColor = "white"; } } }
</ script>
get_fileName() - This method returns the file name to be uploaded get_path() - This method returns the fake path with correct file name get_length() - This method returns the length of the file has been uploaded in bytes get_contentType() - This method returns the mime type of file after it has been uploaded get_errorMessage() - This method returns error message
Step 4: Add below method in the code behind file to save the file
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) { if (AsyncFileUpload1.HasFile) { AsyncFileUpload1.SaveAs(Server.MapPath("UploadedFiles/") + AsyncFileUpload1.FileName); } }
Live Demo
This ends the article of uploading file using asyncfileupload control of ajaxcontroltoolkit.
|