File Upload control using Ajax and javascript in asp.net

Dhaval Patel
Nov 04, 2011
17.7k
0
1
Blog

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

Javascript file

  <script type="text/javascript" language="javascript">

function uploadError(sender,args)
{
document.getElementById('lblStatus').innerText = args.get_fileName(), 
	"<span style='color:red;'>" + args.get_errorMessage() + "</span>";
addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>");  

}

function StartUpload(sender,args)
{
  document.getElementById('lblStatus').innerText = 'Uploading Started.';
}

function UploadComplete(sender,args)
{
 var filename = args.get_fileName();
 var contentType = args.get_contentType();
 var text = "Size of " + filename + " is " + args.get_length() + " bytes";
 if (contentType.length > 0)
 {
  text += " and content type is '" + contentType + "'.";
  }
  document.getElementById('lblfilename').innerText = filename;
  document.getElementById('lblStatus').innerText = text;
  addToClientTable(args.get_fileName(), text); 
}

function fillCell(row, cellNumber, text) {  
var cell = row.insertCell(cellNumber);  
cell.innerHTML = text;  
cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";  
}  
function addToClientTable(name, text) {  
var table = document.getElementById("<%= clientSide.ClientID %>");  
var row = table.insertRow(0);  
fillCell(row, 0, name);  
fillCell(row, 1, text);  
} 

    </script>

Design page

<asp:ScriptManager ID="scman" runat="server">
        </asp:ScriptManager>

  <asp:UpdatePanel ID="update1" runat="server">
            <ContentTemplate>
                <AjaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"
                    OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
                    UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                    UploadingBackColor="#66CCFF" />
                <br />
                <asp:Label ID="Throbber" runat="server" Style="display: none" Font-Bold="true">
<img src="images/indicator-new.gif" align="absmiddle" alt="loading" />
                </asp:Label>
                <asp:Label ID="lblfilename" runat="server" Style="font-family: Arial; color:Green; font-size: small;"></asp:Label>
                <br />
                <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
                <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;"
                    runat="server" cellpadding="3" id="clientSide" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" EventName="UploadedComplete" />
                </Triggers>
        </asp:UpdatePanel>

And Code behind page for file upload

 protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        if (AsyncFileUpload1.HasFile)
        {
            string strPath = MapPath("~/Uploads/") + System.IO.Path.GetFileName(e.filename);
            AsyncFileUpload1.SaveAs(strPath);
        }
    }