Kendo Editor ImageBrowser restrict max image size

[Ben Puzzuoli]

I need to restrict the size of the image file in Kendo Editor ImageBrowser. The project is similar to the demo http://www.telerik.com/clientsfiles/e3e38f54-7bb7-4bec-b637-7c30c7841dd1_KendoEditorImageBrowser.zip?sfvrsn=0 .

Image browser has a possibility to use filtering by file extension http://docs.telerik.com/kendo-ui/api/web/editor#configuration-imageBrowser.fileTypes, but there is no similar way to set the maximum image file size.

I tried to set change and select events for ImageBrowser as here Kendo UI Editor - open event , but they were never invoked.

The difficult things are:
1) is created on fly, it is hard to set “change” event
2) even if that event is set, on e.preventDefault() kendo image browser still sure it was uploaded and tries to get the preview image from controller.

The thing I did was: trying to find that input control when each element is inserted to document. Once I found it, I marked it as hooked, to avoid hook it twice:

function restrictUpload(e) {
    try {
        var files = e.target.files;
        var len = files.length;

        var totalSize = 0;
        for (var i = 0; i < len; ++i) {
            totalSize += files[i].size;
        }

        if (totalSize > 1024 * 1024) {
            alert("You can add images less than 1MB size only");
            e.preventDefault();
        }
    }
    catch (err) {
        console.log("err.message " + err.message);
    }
}

function initUploadRestrict() {
    try{
        var inputControl = $('input[name=file][type=file][data-role=upload]');
        console.log("inputControl.length= " + inputControl.length);

        if (0 !== inputControl.length &&
            inputControl.data("HookedRestrictUpload") !== true)
        {
            inputControl.change(restrictUpload);
            inputControl.data("HookedRestrictUpload", true);
        }
    } catch (err) {
        console.log(err.message);
    }
}

$(document).bind('DOMSubtreeModified', function () {
    console.log("DOMSubtreeModified call");
    initUploadRestrict();
})

I know this is wrong solution, because ImageBrowserController.Thumbnail is still invoked and the image still tries to appear in preview. Another con: DOMSubtreeModified is executed for hundreds times.

How to make Kendo ImageBrowser to restrict upload of images by file size in correct way?

Thanks

[Dimo]

Hello Ben,

You can use the following approach, which relies on click on the Editor's image tool, then locates the Upload widget inside the ImageBrowser, and attaches a handler for the Upload's select event, which is cancellable:

http://docs.telerik.com/kendo-ui/api/web/upload#events-select

$(".k-insertImage").click(function(){
   setTimeout(function(){
      $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function(e) {
         if (if e.files[0].size > 1024 * 1024) {
            e.preventDefault();
         }
      });
   });
});

Regards,
Dimo
Telerik

 

 

[shashank]

How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?
I have a preview container where the max-width I am allowed to see the preview is 650px.
but if i am inserting images below size but resolution is above 650px the images are too stretched out.
I know we have an option to set the width n height when inserting but how do I auto set it?
 I am thinking to use this:
<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");
                    }
                    
                    // Check image resolution and limit width if necessary.
                    var img = new Image();
                    img.src = URL.createObjectURL(e.files[0].rawFile);
                    
                    img.onload = function() {
                        if (img.width > 550) {
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");
                            
                            // Calculate new height while maintaining the aspect ratio.
                            var ratio = 550 / img.width;
                            var newHeight = img.height * ratio;
                            
                            canvas.width = 550;
                            canvas.height = newHeight;
                            
                            // Draw the image on the canvas with the adjusted dimensions.
                            ctx.drawImage(img, 0, 0, 550, newHeight);
                            
                            // Convert the canvas content back to a Blob object.
                            canvas.toBlob(function (blob) {
                                // Replace the original file with the resized image file.
                                e.files[0].rawFile = blob;
                            }, e.files[0].type);
                        }
                    };
                });
            });
        });
    });
</script>

[Ben Puzzuoli]

Thanks.