IE 11: pasting large image results in browser freeze

2 posts, 0 answers
  1. Wes
    Wes avatar
    8 posts
    Member since:
    Aug 2016

    Posted 02 Oct Link to this post

    Pasting a large (>500kb) image into the editor in IE 11 renders the browser frozen for a significant time.

    To reproduce:

    1. Go here: http://demos.telerik.com/kendo-ui/editor/index

    2. Open any image greater than 500kb in MS Paint. A larger image will make the problem worse.

    3. Select all and copy the image.

    4. Paste into the demo editor.

    On my i7 machine, this takes around 24 seconds to unfreeze, and then the image is pasted normally. No other browsers exhibit this behavior.

    After digging through the Editor source code, and placing timers in several locations within the "paste" function, I found that there is quite a bit of DOM manipulation going on, without the clipboard content being validated in any way.

    My question is this: what is the best way to stop the execution of the paste function based on the size of the clipboard data? Is there something already within the Editor API that I'm missing? PasteCleanup doesn't fire until after the paste event, so a custom function there doesn't help. What I really need is something like a maxPasteSize option in the Editor instantiation, that will reject anything over that without manipulating the DOM.

  2. Ianko
    Admin
    Ianko avatar
    1729 posts

    Posted 04 Oct Link to this post

    Hello Wes,

    I am afraid there is no possible option to stop the DOM manipulation during paste event as there are many paste-related features that depends on that. However, if you find some important notes or suggestions that might be helpful on the topic you can post them in the Kendo feedback portal: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

    As for restricting based on the size of an image. The pasted image from the clipboard is a base64 string and there is no automatic way to determine the file size. It is possible to determine that by using the length of the string (https://stackoverflow.com/questions/13378815/base64-length-calculation). And by that stop the paste event if the pasted string is larger that the certain amount of data acceptable. Similar to this example here: http://dojo.telerik.com/asOGaK

    Regards,
    Ianko
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top