Editor ImageBrowser - Error Handling for Large Images

[Joe]

I've implemented the Javascript version of the Kendo UI Editor with full server-side Image Browser support. The browser and editor work like a charm in most cases, except when there's an error uploading an image that happens before it gets to my server-side error handling.

I'm referring to images bigger than 4MB, which is my server's maximum request length. When this happens, the process errors out before it hits my server-side code, and the Image Browser doesn't provide any notification to the user that their upload failed or why it failed. I looked through the documentation, and there doesn't seem to be any error handling functions available for me to insert my own error notifications into.

Is there something I'm missing? Can I use one of the other error handling functions?

[Rosen]

Hi Joe,

Indeed, you are correct there is no notification shown to the user that the upload has failed. However, we managed to address this and the fix will be included in the next internal build. Meanwhile, I have updated your telerik points as a token of gratitude for bringing this to our attention.

Regards,
Rosen
the Telerik team

[Joe]

Awesome!

I've seen this mentioned around the forums before. How do I get access to your internal builds?

[Rosen]

Hi Joe,

You can download the latest internal build via your account here.

Greetings,
Rosen
the Telerik team

[Barry P]

I'm looking for a way to handle this, too.  Has anything been done to create an error handler for the imagebrowser and filebrowser?

Right now, an error with the ImageBrowser is getting picked up by the editor's error handler.  However, I can't tell there what or where the error was.  Also, I'm testing this by attempting to delete an image and having it fail.  When this happens, the image in the ImageBrowser disappears, even though the web service failed and didn't actually delete the image.  If I exit and re-enter (or change to another folder and then return), the image shows up again.

I'd like to be able to programmatically handle the error, and also tell the ImageBrowser to do something like a CancelChanges so that the image remains if it couldn't be deleted.

[Barry P]

I made mistakes in that post.  I'm using the error handler on the imageBrowser of the editor, so clearly it was implemented.

However, I still don't know how to interact with the imageBrowser (and I'm assuming, the fileBrowser when I get there).  I want to cancel the changes that didn't take for now.  Is there a way to interact with the imageBrowser and is there documentation for the details?

Thanks.

[Rosen]

Hello Barry,

You can get reference to the DataSource instance associated with the ImageBrowser using the sender field of the error event argument. For example:

$(".k-imagebrowser").data("kendoImageBrowser").bind("error", function (e) {
    e.sender.dataSource.cancelChanges();
});

Regards,
Rosen
Telerik

 

 

[Barry P]

Thanks for the response, but...  Here's the error I'm seeing in the browser console.

Default.js:951 Uncaught TypeError: Cannot read property 'bind' of null(anonymous function) @ Default.js:951(anonymous function) @ jquery.min.js:3b.Callbacks.c @ jquery.min.js:3b.Callbacks.p.fireWith @ jquery.min.js:3b.extend.Deferred.b.each.i.(anonymous function) @ jquery.min.js:3ut.extend.read.n._queueRequest.n.online.n.transport.read.success @ kendo.all.min.js:11ht.extend.read.n.success @ kendo.all.min.js:11b.Callbacks.c @ jquery.min.js:3b.Callbacks.p.fireWith @ jquery.min.js:3k @ jquery.min.js:5b.ajaxTransport.send.r @ jquery.min.js:5

It appears that $(".k-imagebrowser").data("kendoImageBrowser") is returning null.

[Rosen]

Hello Barry,

 

I was under the impression that you are already using the error event of the ImageBrowser, thus you will need to add the just e.sender.dataSource.cancelChanges(); of the pasted sample code.

 

Otherwise you may use similar to the following code in order to hook to the ImageBrowser error event after it is shown via the Editor's insert image click:

 

$(".k-insertImage").click(function(e){
    window.setTimeout(function(){
      $(".k-imagebrowser").data("kendoImageBrowser").bind("change", function(e){
         // Do something here
      });
   });
});

 

 

Regards,
Rosen
Telerik

 

 

[Barry P]

I thought I had to bind to this differently based on your example.  I just went ahead and added the "e.sender.dataSource.cancelChanges();" statement to my existing handler, and it worked fine.

I probably should have realized that earlier, but I was going down the wrong road.

Another question - When my service raises an error, I can capture it and react, but I still get some sort of native alert that there was an error.  How can you suppress the alert that automatically happens when there's a web service error?

 Thanks!

[Rosen]

Hello Barry,

You should be able to prevent the alert from appearing by calling e.preventDefault() inside the error event.

Regards,
Rosen
Telerik

 

 

[Barry P]

Of course.  Should have realized that, too.

Thank you!