ProgressArea - 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:

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <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
    <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"/>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?