Uploading Edited Image on Server

Environment

Product	Telerik UI for ASP.NET Core ImageEditor
Progress Telerik UI for ASP.NET Core version	Created with the 2024.2.514 version

Description

How can I upload the edited image from the ImageEditor directly to the server?

Solution

1. Add an external button (for example, above the ImageEditor) and handle its click event.

     @(Html.Kendo().Button()
         .Name("uploadBtn")
         .Content("Save Image")
         .Events(ev => ev.Click("onClick")))
   
     @(Html.Kendo().ImageEditor()
         .Name("imageEditor")
         .SaveAs(s => s.FileName("image_edited.png"))
     )
   
     <script>
       function onClick() {
         // "Save Image" button click event handler.
       }
     </script>
   

     @addTagHelper *, Kendo.Mvc
   
     <kendo-button name="uploadBtn" on-click="onClick">
       Save Image
     </kendo-button>
   
     <kendo-imageeditor name="imageEditor">
         <save-as file-name="image_edited.png" />
     </kendo-imageeditor>
   
     <script>
       function onClick() {
         // "Save Image" button click event handler.
       }
     </script>
   

2. Within the click event handler, get a reference to the ImageEditor and call the getCanvasElement() method to get the canvas element.

3. Use the toDataURL() method to convert the canvas to Base64 and trigger an AJAX request to the server to send the edited image.

     <script>
       function onClick() {
         var imageEditor = $("#imageEditor").getKendoImageEditor();
         var canvas = imageEditor.getCanvasElement();
         var base64Content = canvas.toDataURL();
         $.ajax({
           url: "@Url.Action("UploadImage","Home")",
           type: 'POST',
           data: JSON.stringify({ base64: base64Content }),
           contentType: 'application/json',
           success: function(response) {
               console.log("Uploaded successfully.");
           }
         });
       }
     </script>
   

     [HttpPost]
     public JsonResult UploadImage(string base64)
     {
         var fileContent = Convert.FromBase64String(base64);
         ...
         return Json(true);
     }
   

More ASP.NET Core ImageEditor Resources

• ASP.NET Core ImageEditor Documentation

• ASP.NET Core ImageEditor Demos

• ASP.NET Core ImageEditor Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the ImageEditor for ASP.NET Core

• Server-Side API Reference of the ImageEditor for ASP.NET Core

• Server-Side TagHelper API Reference of the ImageEditor for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base