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

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:

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

Support & Learning Resources

Find Assistance