Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Upload / First Look

Configuration
No uploaded files yet
  • Uploaded % ( ) Total
  • Uploaded files: % () Total files:
  • Uploading file:
  • Elapsed time:  Estimated time:  Speed:

  • RadUpload

    RadUpload is a control for single and multi-file uploads with integrated file validation and more.

    The RadUpload appearance can be customized using the ControlObjectsVisibility property of type ControlObjectsVisibility. The ControlObjectsVisibility enumeration contains the following members:

    • None - displays only the file input fields
    • CheckBoxes - displays checkboxes in front of the file input fields. Used in conjunction with the Delete (Selected) button and the DeleteSelectedButton value of ControlObjectsVisibility
    • RemoveButtons - displays Remove buttons on the right of the file input fields
    • ClearButtons - displays Clear buttons on the right of the file input fields
    • AddButton - displays an Add button below the file input fields
    • DeleteSelectedButton - displays a Delete button below the file input fields - used in conjunction with the CheckBoxes value
    • Default - a combination of CheckBoxes, RemoveButtons, AddButton and DeleteSelectedButton values
    • All - a combination of all the members

    The ControlObjectsVisibility property can receive any combination of these flags, e.g.:

    Radupload1.ControlObjectsVisibility = ControlObjectsVisibility.RemoveButtons | ControlObjectsVisibility.ClearButtons

    RadUpload exposes two properties to control the number of file inputs:

    • InitialFileInputsCount - the file inputs count which will be available at startup. The default value is 1.
    • MaxFileInputsCount - limit the maximum number of file inputs which can be added to a RadUpload instance.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Upload.CustomizingRadUploadUI.DefaultCS" %>
    <%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <%@ register tagprefix="qsf" namespace="Telerik.QuickStart" %>
    <%@ register tagprefix="qsf" tagname="Header" src="~/Common/Header.ascx" %>
    <%@ register tagprefix="qsf" tagname="HeadTag" src="~/Common/HeadTag.ascx" %>
    <%@ register tagprefix="qsf" tagname="Footer" src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <qsf:headtag runat="server" />
            
            <link rel="stylesheet" type="text/css" href="styles.css" />
        </head>
        <body class="BODY">
            <form id="mainForm" method="post" runat="server">
             <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            
                <qsf:Header ID="Header1" runat="server" navigationlanguage="C#" />

                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configuration">
                    <div style="height: 110px;">
                     <asp:Panel id="elementSetPanel" runat="server">
                         <div class="title">Set of visible elements</div>
                        
                         <asp:RadioButton ID="radiobuttonNone" runat="server" Text="None" GroupName="visibilityOptions" /><br />
                         <asp:RadioButton ID="radiobuttonDefault" runat="server" Text="Default" Checked="True" GroupName="visibilityOptions" /><br />
                         <asp:RadioButton ID="radiobuttonAll" runat="server" Text="All" GroupName="visibilityOptions" /><br />
                         <asp:RadioButton ID="radiobuttonCustom" runat="server" Text="Custom" GroupName="visibilityOptions" />

                         <asp:Panel id="checkboxPanel" runat="server" style="display: none">
                             <asp:CheckBox ID="checkboxCheckBoxes" runat="server" Text="CheckBoxes" /><br />
                             <asp:CheckBox ID="checkboxRemoveButtons" runat="server" Text="Remove Buttons" /><br />
                             <asp:CheckBox ID="checkboxClearButtons" runat="server" Text="Clear Buttons" /><br />
                             <asp:CheckBox ID="checkboxAddButton" runat="server" Text="Add Button" /><br />
                             <asp:CheckBox ID="checkboxDeleteSelectedButton" runat="server" Text="Delete Button" />
                         </asp:Panel>
                     </asp:Panel>

                     <asp:Panel id="fileInputCountPanel" runat="server">
                         <div class="title">File inputs count</div>
                        
                         <label for="textboxInitialFileInputsCount_text">Initial:</label>
                         <telerik:RadNumericTextBox
                             runat="server" ID="textboxInitialFileInputsCount"
                             ShowSpinButtons="true" Width="50px"
                             MinValue="1" NumberFormat-DecimalDigits="0" />
                                
                         <br /><br />

                         <label for="textboxMaxFileInputsCount_text">Maximum:</label>
                         <telerik:RadNumericTextBox
                             runat="server" ID="textboxMaxFileInputsCount"
                             ShowSpinButtons="true" Width="50px"
                             MinValue="1" NumberFormat-DecimalDigits="0" />
                     </asp:Panel>

                     <div id="buttonWrapper">
                         <asp:Button id="buttonApplyChanges" runat="server" text="Apply Changes" OnClick="buttonApplyChanges_Click" CssClass="button" />
                     </div>
                    </div>
                </qsf:ConfiguratorPanel>
                
                <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />

                <table>
                    <tr>
                        <td>
                            <telerik:RadUpload ID="RadUpload1" runat="server" />                        
                        </td>
                        <td>                                    
                            <div>
                                <asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
                
                                <asp:Repeater ID="repeaterResults" runat="server" Visible="False">
                                    <HeaderTemplate>
                                        <div class="title">Uploaded files in the target folder:</div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%#DataBinder.Eval(Container.DataItem, "FileName")%>
                                        <%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
                                        <br />
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </td>
                    </tr>
                </table>
                
                <div class="submitArea">
    <asp:Button runat="server" ID="SubmitButton" Text="Upload files"
    onclick="SubmitButton_Click" />
                </div>

                <telerik:RadProgressArea runat="server" ID="ProgressArea1"></telerik:RadProgressArea>

                <script type="text/javascript">
                /*<![CDATA[*/
                    function pageLoad ()
                    {
                        function enableCustomFields()
                        {
                            var panelWithCheckboxes = $get("<%=checkboxPanel.ClientID%>");
                            
                            if(!$get("<%=radiobuttonCustom.ClientID%>").checked)
                            {
                                panelWithCheckboxes.style.display = 'none';
                            }
                            else
                            {
                                panelWithCheckboxes.style.display = 'block';
                            }
                        }
                        
                        var elementSetRadios = $get("<%=elementSetPanel.ClientID%>").getElementsByTagName('input');
                        
                        for (var i = 0, len = elementSetRadios.length; i < len; i++)
                        {
                            if (elementSetRadios[i].type == "radio")
                            {
                                elementSetRadios[i].onclick = enableCustomFields;
                            }
                        }
                        
                        enableCustomFields();
                    }
                    
                /*]]>*/
                </script>
                
                <qsf:Footer runat="server" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451