This is a migrated thread and some comments may be shown as answers.

Kendo Editor ImageBrowser restrict max image size

2 Answers 200 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ben Puzzuoli
Top achievements
Rank 1
Ben Puzzuoli asked on 17 Mar 2014, 09:42 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Mar 2014, 08:23 AM
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.

 
0
Ben Puzzuoli
Top achievements
Rank 1
answered on 19 Mar 2014, 07:16 PM
Thanks.
Tags
Editor
Asked by
Ben Puzzuoli
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ben Puzzuoli
Top achievements
Rank 1
Share this question
or