Set Size Limit for Images Uploaded with Editor ImageBrowser

Environment

Product Progress Kendo UI Editor
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I set a size limit for the images that are uploaded with the ImageBrowser of the Editor?

Solution

  1. Check the size of the selected file in the select event handler of the Upload that is embedded in the ImageBrowser.
  2. Prevent the upload if the file size exceeds the specified limit.
<script>
    $(document).ready(function () {
        // Attach a click handler to the ImageBrowser tool of the Editor.
        $(".k-i-image").click(function () {
            setTimeout(function(){
                // Attach a select handler to the Upload embedded in the ImageBrowser.
                $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
                    // Prevent the event if the selected file exceeds the specified limit.
                    if (e.files[0].size > 1048576) {
                        e.preventDefault();
                        alert("Maximum allowed file size: 1MB");
                    }
                });
            });
        });
    });
</script>
In this article
Not finding the help you need? Improve this article