RadAsyncUpload - Telerik 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.
   
Isolate this demo as a stand-alone application

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.

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.

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

More about AsyncUpload for ASP.NET AJAX product page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AsyncUpload.Examples.Overview.DefaultCS" %>

<%@ 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>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" />
    <div class="demo-container no-bg">
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingExamplePanel" />
        <input runat="server" type="hidden" id="UploadedFilesJson" />
        <asp:PlaceHolder runat="server" ID="Panel1" Visible="true">
                <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" 
                                Text="john@johnsmith.com"
                                EmptyMessage="To" EnableViewState="false" />
                        </li>
                        <li class="qsf-fb-row">
                            <telerik:RadTextBox runat="server" ID="SubjectTextBox" Width="100%"
                                EnableEmbeddedSkins="false" 
                                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" Font-Size="12px">
                            <CssFiles>
                                <telerik:EditorCssFile Value="styles.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>
        </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>

        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.initialize();
            });
        </script>

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

Find Assistance

Help Us Improve

Was this example helpful?