Upload (Async)

Controls

SharePoint Web Parts

Editor
Grid
ListView
Scheduler

Support Resources

Integration Examples

Q1 2013 released 04/17/2013
next demo
view source rate / review
get trial buy now
All Controls

Upload (Async)

Rate this demo

Thank you for your post!

RadAsyncUpload - Telerik's ASP.NET AsyncUpload

Attachments
Select files to upload (.jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx)
   
 
 
  
   

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 70+ other controls are part of RadControls 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 the business logic of the app.

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 RadControls) to quickly create, upgrade and configure your RadControls 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 RadControls, 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
Read details on RadAsyncUpload’s product page

Resources

C# VB
Show code in new window Demo isolation steps 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Upload_Examples_AsyncUpload_Default" %>
<%@ 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>
    <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="Hay"
                              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>


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

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.

Copyright 2002-2013 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451