Kendo Editor ImageBrowser restrict max image size

3 posts, 1 answers
  1. Ben Puzzuoli
    Ben Puzzuoli avatar
    3 posts
    Member since:
    Nov 2009

    Posted 17 Mar 2014 Link to this post


    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 19 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ben Puzzuoli
    Ben Puzzuoli avatar
    3 posts
    Member since:
    Nov 2009

    Posted 19 Mar 2014 in reply to Dimo Link to this post

    Thanks.
Back to Top