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

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:

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

    <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"  />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance