ProgressArea - Integration with AsyncUpload

Upload large file(s) using RadAsyncUpload 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 example showcases how you can use Telerik’s Progress Bar to enhance the file upload progress monitoring of Telerik’s AJAX Async Upload control. That way in addition to the current upload process the user can track the overall one as well.

Quickly adapt the progress bar to any application's design thanks to the 20 built-in skins or define your own templates for custom look and feel.

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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" Type="Info" Icon="Info" runat="server">
        Upload large file(s) using RadAsyncUpload and monitor the file upload progress
        via RadProgressArea

    <div class="demo-container size-narrow">
        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" EnableInlineProgress="false"  />
        <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
        <telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1"  />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?