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

Additional Fields

Add files to Gallery

No files uploaded

Additional Fields

RadAsyncUpload provides the client-side event OnClientFileUploaded which can be used to manipulate the rows, added by selecting a file from the dialog window. Using this event you can add any HTML element to RadAsyncUpload, including inputs.

The client-side method of RadAsyncUpload getAdditionalFieldID(name) generates the ID and the name of the additional input elements. It is important to use it in OnClientFileUploaded event handler function in order to be able to retrieve input values from the newly added fields on the server-side.

At Server-side you can obtain the additional fields values using theUploadedFile.GetFieldValue(name) method. You should use the same value which was passed to the getAdditionalFieldID(name) method in order to retrieve the input value.

Click on the "Select" button in order to show the file dialog and select file for upload. Once the file is uploaded to the temporary directory an input will appear just below the name of the uploaded file. There you could associate the uploaded file with some information.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AsyncUpload.Examples.AdditionalFields.DefaultCS" %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" Skin="Office2007" DecoratedControls="Textbox, Buttons" />

        <h2>Add files to Gallery</h2>

        <hr class="qsf-clear-float" />

        <div class="uploaded-files">
            <asp:Literal runat="server" ID="ltrNoResults" Visible="True" Text="<strong>No files uploaded</strong>" />
            <asp:Repeater runat="server" ID="Repeater1">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <FooterTemplate></ul></FooterTemplate>
                <ItemTemplate>
                    <li>
                        <dl>
                            <dt>File info:</dt>
                            <dd><%#((Telerik.Web.UI.UploadedFile)Container.DataItem).GetFieldValue("TextBox").ToString()%></dd>
                            <dt>File name:</dt>
                            <dd><%# DataBinder.Eval(Container.DataItem, "FileName").ToString() %></dd>
                            <dt>File size:</dt>
                            <dd><%# DataBinder.Eval(Container.DataItem, "ContentLength").ToString() %></dd>
                        </dl>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </div>

        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" OnClientFileUploaded="onClientFileUploaded"
            MultipleFileSelection="Automatic" Skin="Office2007"  />

        <p class="buttons">
            <asp:Button runat="server" ID="buttonSubmit" OnClick="buttonSubmit_Click" Text="Submit" />
        </p>

    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance