New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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

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

Razor

  @(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>

Within the click event handler, get a reference to the ImageEditor and call the getCanvasElement() method to get the canvas element.
Use the toDataURL() method to convert the canvas to Base64 and trigger an AJAX request to the server to send the edited image.

Html
  <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>
HomeController.cs
  [HttpPost]
  public JsonResult UploadImage(string base64)
  {
      var fileContent = Convert.FromBase64String(base64);
      ...
      return Json(true);
  }

Uploading Edited Image on Server

Environment

Description

Solution

More ASP.NET MVC ImageEditor Resources

See Also