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

File Upload

Nick
File(s)
No uploaded files yet.

RadAjax controls allow you to force specific controls to make postback requests instead of AJAX ones even when they are wrapped inside a RadAjaxPanel or ajaxified by a RadAjaxManager controls. That is especially useful for file uploads as due to the specifics of Internet forms, files are uploaded only during postback requests (unless you use RadAsyncUpload to upload files asynchronously).

In this example, the Save button executes a regular postback request when a file is chosen. In order to force a control to make postbacks, you need to handle the OnRequestStart client-side event and set the EnableAjax property to false like this:

function OnRequestStart(target, arguments)
{
   if (arguments.get_eventTarget().indexOf( "ButtonSend" ) > -1)
   {
     arguments.set_enableAjax( false );
   }
}

Please note that if you enter an invalid filename you will receive a browser security message.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxPanel.ApplicationScenarios.FileUpload.DefaultCS" %>

<%@ 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 href="styles.css" rel="stylesheet" type="text/css" />
</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 size-wide no-bg">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="requestStart"
            LoadingPanelID="LoadingPanel1">
            <div class="uploadPanel">
                <div class="leftPanel">
                    <div class="controls first">
                        <span class="label">Nick</span>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="NickTextBox" runat="server" Skin="Silk" Width="183px"></telerik:RadTextBox>
                    </div>
                    <div class="controls">
                        <span class="label">File(s)</span>
                        <telerik:RadUpload ID="RadUpload1" runat="server" MaxFileInputsCount="2" OverwriteExistingFiles="false"
                            ControlObjectsVisibility="RemoveButtons" Skin="Silk">
                        </telerik:RadUpload>
                        <asp:Button ID="ButtonSend" OnClick="ButtonSend_Click" runat="server" Text="Save"
                            CssClass="button"></asp:Button>
                    </div>
                </div>
                <div class="rightPanel">
                    <div id="UploadedFileLog" class="UploadedFileClass" runat="server">
                        No uploaded files yet.
                    </div>
                </div>
            </div>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" InitialDelayTime="0" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript" src="scripts.js"></script>
        </telerik:RadCodeBlock>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance