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

File Upload via AJAX

*Size limit: 2MB
  • Print Image
  • Save Image
  • Export Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Resize
  • Zoom
    • Zoom
    • Zoom In
    • Zoom Out
  • Opacity
  • Rotate
    • Rotate
    • Rotate Right by 90 deg
    • Rotate Left by 90 deg
  • Flip
    • Flip
    • Flip Vertically
    • Flip Horizontally
  • Add Text
  • Insert Image
  • Brightness/Contrast
    • Brightness/Contrast
    • Hue/Saturation
    • Blur
    • Sharpen
    • Greyscale
    • Sepia
    • Invert Colors (negative)
  • Pencil
    • Pencil
    • Line
    • DrawRectangle
    • DrawCircle
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

This example demonstrates how to upload an image for editing in the Image Editor by using an Ajax Request in the OnClientFilesUploaded event of RadAsyncUpload. RadImageEditor offers a variety of server-side methods and events that enable you to manipulate an image on the server, not just on the client. You can use the OnImageLoading event to change the image that will be loaded according to some custom logic. This event is fired just before the image is loaded from the file system. The event can be cancelled and the edited image loaded from a custom location. Note that the OnImageLoading event is fired only when the ImageEditor needs to load the initial image.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true"
CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_UploadImage_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></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 size-wide">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="false">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />
                        <telerik:AjaxUpdatedControl ControlID="AsyncUpload1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div id="dwndWrapper">
            <telerik:RadAsyncUpload RenderMode="Lightweight" ID="AsyncUpload1" runat="server" 
                                    OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="AsyncUpload1_FileUploaded"
                                    MaxFileSize="2097152" AllowedFileExtensions="jpg,png,gif,bmp"
                                    AutoAddFileInputs="false" Localization-Select="Upload Image" />
            <asp:Label ID="Label1" Text="*Size limit: 2MB" runat="server" Style="font-size: 10px;"></asp:Label>
        </div>
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" Width="790" Height="450" 
                                ImageUrl="~/ImageEditor/images/waterpool.jpg" OnImageLoading="RadImageEditor1_ImageLoading">
        </telerik:RadImageEditor>
    </div>
    <script type="text/javascript">
        //<![CDATA[
        serverID("ajaxManagerID", "<%= RadAjaxManager1.ClientID %>");
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance