AsyncUpload - Uploaded File Persistence across Postbacks

Dream Holiday Contest

No picture available
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<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>

    <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>
                        <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" />
                        <label>Select country:</label>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" AutoPostBack="true" DataSourceID="DataSourceCountries"
                            DataTextField="Name" DataValueField="ID" EmptyMessage=" " Skin="Outlook"  />
                        <label>Select city:</label>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox2" AutoPostBack="true" DataSourceID="DataSourceCities"
                            DataTextField="Name" DataValueField="ID" Skin="Outlook"  />

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

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



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

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


Find Assistance

Help Us Improve

Was this example helpful?