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.

RadAsyncUpload - Telerik's ASP.NET AsyncUpload

Attachments
Select files to upload (.jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx)
RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
  
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   

tlrk.it/17apFcp To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/17apFcp

About RadAsyncUpload for ASP.NET AJAX

Perform configurable asynchronous uploads of single or multiple files using RadAsyncUpload for ASP.NET AJAX. The control addresses the limitation to perform file uploads with plain post backs only, and supports web farm scenarios, as well as internal validation, using its http handler for this purpose. RadAsyncUpload provides smooth file async upload handling with rich progress status information display, and its efficient proprietary http handler allocates minimum server memory.

RadAsyncUpload and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

About This Demo

This simple mail app mockup showcases the use of RadAsyncUpload for file attachments.

  • Press the select button to trigger the file dialog or drop some files over the control in order to start uploading.
  • Select a few files at the same time to make use of the multi-file selection functionality.
  • Enjoy the neat progress bar that shows next to each file being uploaded.
  • Try uploading an invalid file (an executable file, for example) to test out the automatic validation.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular AsyncUpload demo, you can use the following path to find it in the sample website application:
asyncupload/examples/overview

Key Features

  • Fully asynchronous file upload
  • Out of the box progress monitoring
  • Built-in validation
  • Visual indicators for common operations
  • Support for drag and drop file upload
  • Allows the upload of large files over 4MB

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="AsyncUpload.Examples.Overview.DefaultVB" %>
<%@ Register Src="~/AsyncUpload/Examples/Overview/Info.ascx" TagPrefix="qsf" TagName="Info" %>
<%@ 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>ASP.NET Upload examples | RadAsyncUpload by Telerik</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

     <script src="scripts.js" type="text/javascript"></script>
     <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingExamplePanel" />

     <input runat="server" type="hidden" id="UploadedFilesJson" />

     <asp:PlaceHolder runat="server" ID="Panel1" Visible="true">
          <div class="qsf-demo-canvas">
               <div class="qsf-fb">

                    <ul class="qsf-fb-group qsf-fb-from-to">
                         <li class="qsf-fb-row">
                              <telerik:RadTextBox runat="server" ID="ToTextBox" Width="100%"
                                   EnableEmbeddedSkins="false" Skin="Qsf"
                                   Text="john@johnsmith.com"
                                   EmptyMessage="To" EnableViewState="false" />
                         </li>
                         <li class="qsf-fb-row">
                              <telerik:RadTextBox runat="server" ID="SubjectTextBox" Width="100%"
                                   EnableEmbeddedSkins="false" Skin="Qsf"
                                   Text="New Website Designs"
                                   EmptyMessage="Subject" EnableViewState="false" />
                         </li>
                    </ul>

                    <div class="qsf-fb-group qsf-fb-attachments">
                         <strong>Attachments</strong>
                         <%--
                              For the purpose of this demo the files are discarded.
                              In order to store the uploaded files permanently set the TargetFolder property to a valid location.
                         --%>
                         <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1"
                              HideFileInput="true"
                              Skin="Telerik"
                              MultipleFileSelection="Automatic"
                              AllowedFileExtensions=".jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx"
                              OnClientFileUploadFailed="onUploadFailed" OnClientFileSelected="onFileSelected"
                              OnClientFileUploaded="onFileUploaded" />
                         <span class="allowed-attachments">
                              Select files to upload (<%= String.Join( ",", AsyncUpload1.AllowedFileExtensions ) %>)
                         </span>
                    </div>

                    <div class="qsf-fb-group">
                         <telerik:RadEditor ID="MailBodyEditor" runat="server" Width="750" Height="250"
                              EnableResize="false" EditModes="Design" EnableViewState="false"
                              EnableEmbeddedSkins="false" Skin="Qsf">
                              <CssFiles>
                                   <telerik:EditorCssFile Value="editor.css" />
                              </CssFiles>
                              <Tools>
                                   <telerik:EditorToolGroup Tag="MainToolbar">
                                        <telerik:EditorTool Name="AjaxSpellCheck" />
                                        <telerik:EditorSeparator Visible="true" />
                                        <telerik:EditorTool Name="Undo" />
                                        <telerik:EditorTool Name="Redo" />
                                        <telerik:EditorSeparator Visible="true" />
                                        <telerik:EditorTool Name="Cut" />
                                        <telerik:EditorTool Name="Copy" />
                                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+!" />
                                   </telerik:EditorToolGroup>
                                   <telerik:EditorToolGroup Tag="Formatting">
                                        <telerik:EditorTool Name="Bold" />
                                        <telerik:EditorTool Name="Italic" />
                                        <telerik:EditorTool Name="Underline" />
                                        <telerik:EditorSeparator Visible="true" />
                                        <telerik:EditorTool Name="ForeColor" />
                                        <telerik:EditorTool Name="BackColor" />
                                        <telerik:EditorSeparator Visible="true" />
                                        <telerik:EditorTool Name="FontName" />
                                        <telerik:EditorTool Name="RealFontSize" />
                                   </telerik:EditorToolGroup>
                              </Tools>
                              <Content>
                                   <p>Hi John,<//p>
                                   <p>
                                        Please find the new agency design proposals attached.<br />
                                        Let me know what you think.
                                   </p>
                                   <p>Thanks!</p>
                                   <p>
                                        Best,<br />
                                        Serena
                                   </p>
                              </Content>
                         </telerik:RadEditor>
                    </div>

                    <div class="buttons">
                         <asp:Button runat="server" ID="SaveButton" Text="Send" OnClick="SaveButton_Click" />
                    </div>

               </div>
          </div>
     </asp:PlaceHolder>

     <asp:PlaceHolder runat="server" ID="Panel2" Visible="false">
          <div class="qsf-demo-canvas">
               <div class="qsf-fb">

                    <ul class="qsf-fb-group qsf-fb-from-to">
                         <li class="qsf-fb-row">
                              <label>To:</label>
                              <asp:Label runat="server" ID="ToLabel" />
                         </li>
                         <li class="qsf-fb-row">
                              <label>Subject:</label>
                              <asp:Label runat="server" ID="SubjectLabel" />
                         </li>
                    </ul>

                    <div class="qsf-fb-group qsf-fb-attachments">
                         <label>Attached files:</label>
                         <asp:Repeater runat="server" ID="AttachmentRepeater" EnableViewState="false">
                              <ItemTemplate>
                                   <span class="attachment icon-<%#Eval("FileExtension")%>">
                                        <%#Eval("FileName")%>
                                        (<%# Eval("ContentLength")%>kb);
                                   </span>
                              </ItemTemplate>
                         </asp:Repeater>
                    </div>

                    <div class="qsf-fb-group qsf-fb-message-body">
                         <asp:Literal runat="server" ID="MailBodyLiteral" />
                    </div>

                    <div class="buttons">
                         <asp:Button ID="BackButton" Text="Back" runat="server" OnClick="BackButton_Click" />
                    </div>

               </div>
          </div>
     </asp:PlaceHolder>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/AsyncUpload.png" AlternateText="tlrk.it/17apFcp" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/17apFcp">tlrk.it/17apFcp</a>
    </div>

    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here