Upload (Async)

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

AsyncUpload - Additional Fields

Add files to Gallery:


No files uploaded

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.

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.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AsyncUpload.Examples.AdditionalFields.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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">
    <title>Additional fields property, enabled in ASP.NET Upload control | RadAsyncUpload Demo</title>
    <link rel="stylesheet" type="text/css" href="Styles.css"/>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <telerik:RadFormDecorator ID="FormDecorator1" runat="server" skin="Office2007"/>
     <div class="qsf-demo-canvas">
          <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 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>

     <script src="script.js" type="text/javascript"></script>

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