Uploading Edited Image on Server

Environment

Product	Telerik UI for ASP.NET MVC ImageEditor
Progress Telerik UI for ASP.NET MVC 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>
   

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 MVC ImageEditor Resources

• ASP.NET MVC ImageEditor Documentation

• ASP.NET MVC ImageEditor Demos

• ASP.NET MVC ImageEditor Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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

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

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base