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>