In Focus
First Guide To Machine Learning

C# Corner

File Upload control using Ajax and javascript in asp.net

Asyncfile upload control using Ajax and ajaxcontroltoolkit.dll version 3.0.30930.28736

How to Make File upload using Ajax control in asp.net

Javascript file
  1. <script type="text/javascript" language="javascript">  
  2. function uploadError(sender,args){  
  3.     document.getElementById('lblStatus').innerText = args.get_fileName(),   
  4.     "<span style='color:red;'>" + args.get_errorMessage() + "</span>";  
  5.     addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>");    
  6.   
  7. }  
  8.   
  9. function StartUpload(sender,args){  
  10.     document.getElementById('lblStatus').innerText = 'Uploading Started.';  
  11. }  
  12.   
  13. function UploadComplete(sender,args){  
  14.     var filename = args.get_fileName();  
  15.     var contentType = args.get_contentType();  
  16.     var text = "Size of " + filename + " is " + args.get_length() + " bytes";  
  17.   
  18.     if (contentType.length > 0)  
  19.     {  
  20.         text += " and content type is '" + contentType + "'.";  
  21.     }  
  22.     document.getElementById('lblfilename').innerText = filename;  
  23.     document.getElementById('lblStatus').innerText = text;  
  24.     addToClientTable(args.get_fileName(), text);   
  25. }  
  26.   
  27. function fillCell(row, cellNumber, text) {    
  28.     var cell = row.insertCell(cellNumber);    
  29.     cell.innerHTML = text;    
  30.     cellcell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";    
  31. }    
  32. function addToClientTable(name, text) {    
  33.     var table = document.getElementById("<%= clientSide.ClientID %>");    
  34.     var row = table.insertRow(0);    
  35.     fillCell(row, 0, name);    
  36.     fillCell(row, 1, text);    
  37. }  
  38. </script>  

Design page
  1. <asp:ScriptManager ID="scman" runat="server"></asp:ScriptManager>  
  2.   
  3. <asp:UpdatePanel ID="update1" runat="server">  
  4. <ContentTemplate>  
  5.     <AjaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"  
  6.         OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"  
  7.         UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"  
  8.         UploadingBackColor="#66CCFF" />  
  9.     <br />  
  10.     <asp:Label ID="Throbber" runat="server" Style="display: none" Font-Bold="true">  
  11.         <img src="images/indicator-new.gif" align="absmiddle" alt="loading" />  
  12.     </asp:Label>  
  13.     <asp:Label ID="lblfilename" runat="server" Style="font-family: Arial; color:Green; font-size: small;"></asp:Label>  
  14.     <br />  
  15.     <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>  
  16.     <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;"  runat="server" cellpadding="3" id="clientSide" />  
  17. </ContentTemplate>  
  18. <Triggers>  
  19.     <asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" EventName="UploadedComplete" />  
  20.     </Triggers>  
  21. </asp:UpdatePanel>  

And Code behind page for file upload 
  1. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
  2. {  
  3.     System.Threading.Thread.Sleep(1000);  
  4.     if (AsyncFileUpload1.HasFile)  
  5.     {  
  6.         string strPath = MapPath("~/Uploads/") + System.IO.Path.GetFileName(e.filename);  
  7.         AsyncFileUpload1.SaveAs(strPath);  
  8.     }  
  9. }