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

    Integration with RadDock

    Select Files to Upload

    Select
    Drop files here

    Select a file for upload and watch the upload details pane appearing on the dock on the right. You could easily specify the container of the File List Panel, by setting the FileListPanelZone property from the FileListPanelSettings section.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="CloudUpload.Examples.IntegrationWithRadDock.DefaultCS" %>
     
    <%@ 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 href="styles.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadDock RenderMode="Lightweight" runat="server"  Style="z-index: 100000" Top="243px" Left="316px" ID="RadDock1" DockMode="Floating" DefaultCommands="None" Title="Info panel" Width="500px">
            <ContentTemplate>
                <div class="InfoPanel"></div>
            </ContentTemplate>
        </telerik:RadDock>
        <div class="localhostInfoPanel">
            <qsf:MessageBox ID="LocalhostInfoPanel" Icon="Info" Type="Info" runat="server" Visible="false">
                <p>
                    <b>Note</b>: If you are viewing this demo locally, you need to configure RadCloudUpload via the Design-time Wizard in order to run the example.
                     For more details, check out the online help <a href="http://www.telerik.com/help/aspnet-ajax/cloud-upload-overview.html">articles</a>.
                </p>
            </qsf:MessageBox>
        </div>
        <div class="demo-container size-narrow">
            <div class="qsf-demo-canvas integration-with-dock">
                <h3 class="additional-text">Select Files to Upload</h3>
                <telerik:RadCloudUpload ID="RadCloudUpload1" runat="server" RenderMode="Lightweight" MultipleFileSelection="Automatic" OnFileUploaded="RadCloudUpload1_FileUploaded"
                    ProviderType="Azure" MaxFileSize="3145728">
                    <FileListPanelSettings PanelContainerSelector=".InfoPanel" Height="200px" ShowEmptyFileListPanel="true" />
                </telerik:RadCloudUpload>
     
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance

    Info panel
    Uploaded Files 0/0
    Drop files here