ProgressArea - Integration with Input Type File

Upload large file(s) using input of type file (<input type="file" name="uploader" />) 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 shows how you can use RadProgressArea for file upload progress monitoring of an Input type file HTML element. Telerik’s AJAX Progress Bar can be easily customized with templates or one of the 20+ built-in skins.

  • 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" runat="server" Icon="Info" Type="Info">
        Upload large file(s) using input of type file (&lt;input type="file" name="uploader" /&gt;) 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" />
        <input type="file" name="uploader" />
        <br />
        <asp:Button ID="Button1" Text="Upload" runat="server" Width="75px" CssClass="uploadButton" />
        <telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" Skin="Silk" />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?