New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Integration with FileUpload

Upload large file(s) using ASP:FileUpload and monitor the file upload progress via RadProgressArea


Uploaded % ( ) Total
Uploaded files: % () Total files:

Uploading file:

Elapsed time:  Estimated time:  Speed:

This sample demonstrates how you can use Telerik’s AJAX Progress Area to monitor the file upload progress of even the standard Microsoft ASP File Upload control. RadProgressArea is very easy to customize thanks to the built-in skins and support for templates.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" Icon="Info" Type="Info" runat="server">
        Upload large file(s) using ASP:FileUpload and monitor the file upload progress
        via RadProgressArea
    </qsf:MessageBox>
    <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />

    <div class="demo-container size-narrow">
        <telerik:RadProgressManager runat="server" ID="RadProgressManager" />
        <asp:FileUpload runat="server" ID="FileUpload" />
        <br />
        <asp:Button ID="Button1" Text="Upload" runat="server" Width="75px" CssClass="uploadButton" />
        <br />
        <telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" Skin="Silk"/>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance