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

Uploaded File Persistence across Postbacks

Dream Holiday Contest

No picture available
Persist uploaded files

RadAsyncUpload provides the PostbackTriggers property, which can be used to persist the information about the successfully uploaded files after a postback. Using that property, the information about the successfully uploaded files will be persisted after every postback until an exact control triggers a postback. When a postback is triggered from a control, which ID is specified in the PostbackTriggers property, all the information for the uploaded files will become available on the server-side, and the RadAsyncUpload control will stop persisting the uploaded files' information.

On Server-side you can set PostbackTriggers:
  • E.g. RadAsyncUpload1.PostbackTriggers = new string[] { "RadButton1", "RadButton2", "RadButton3" }.

Also it can be set from the mark up:
  • E.g. PostbackTriggers="RadButton1,RadButton2,RadButton3"

Click on the Select button in order to show the file dialog and select an image file for upload. Once the file is uploaded the combo boxes below will be enabled. After a country is choosen a postback occurs and the submit button will be enabled too.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="true" Inherits="AsyncUpload.Examples.PersistUploadedFiles.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="Buttons, TextBox" />

    <div class="demo-container no-bg">
        <div class="qsf-demo-canvas" id="qsfexWrapper">
            <div class="qsf-fb">
                <h2>Dream Holiday <sup>Contest</sup></h2>
                <ul>
                    <li>
                        <label>Upload a photo of your dream holiday:</label>
                        <telerik:RadAsyncUpload RenderMode="Lightweight" CssClass="photo-upload" runat="server" ID="RadAsyncUpload1" OnClientFileUploaded="onClientFileUploaded" 
                            MaxFileInputsCount="1" AllowedFileExtensions=".jpg" PostbackTriggers="RadButton1" Skin="Outlook" />
                    </li>
                    <li>
                        <label>Select country:</label>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" AutoPostBack="true" DataSourceID="DataSourceCountries" 
                            DataTextField="Name" DataValueField="ID" EmptyMessage=" " Skin="Outlook" />
                    </li>
                    <li>
                        <label>Select city:</label>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox2" AutoPostBack="true" DataSourceID="DataSourceCities"
                            DataTextField="Name" DataValueField="ID" Skin="Outlook" />
                    </li>
                </ul>

                <p class="buttons">
                    <asp:Button runat="server" ID="RadButton1" Text="Submit your picture and information" OnClientClick="updatePictureAndInfo(); return false;" />
                </p>
            </div>

            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ImageUrl="images/blank.png" 
                Width="495" Height="331" ResizeMode="Fit" AlternateText="No picture available"
                CssClass="preview"></telerik:RadBinaryImage>
        </div>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                Sys.Application.add_load(function () {
                    window.countriesCombo = $find("<%=RadComboBox1.ClientID %>");
                    window.citiesCombo = $find("<%=RadComboBox2.ClientID %>");
                    window.upload = $find("<%=RadAsyncUpload1.ClientID %>");

                    demo.initialize();
                });


                //]]>
            </script>
        </telerik:RadScriptBlock>
    </div>

    <asp:SqlDataSource runat="server" ID="DataSourceCountries" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [Name], [ID] FROM [Countries] WHERE ([ID] &lt; @ID)">
        <SelectParameters>
            <asp:Parameter DefaultValue="12" Name="ID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource runat="server" ID="DataSourceCities" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [ID], [Name] FROM [Cities] WHERE ([CountryID] = @ID)">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadComboBox1" Name="ID" PropertyName="SelectedValue"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>

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

Support & Learning Resources

Find Assistance