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 thegetCanvasElement()
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>