Tag Archives: Chrome

Copy/Paste image into an editable DOM element in Chrome

All major browsers allow to paste image directly into a DOM element with contentEditable property set to true. They automatically convert it into IMG element with source pointing to base64 encoded DataURI of the pasted image. That is all browsers, but Chrome. Chrome needs a little help.

In my particular case I need to be able to paste image into an IFRAME with editable body of the content document (for some reason Infragistics WebHtmlEditor ASP.NET control renders itself as this contraption). But the code below applies (with small changes) to any editable DOM element.

To achieve the result we need to perform 3 tasks:

1. Capture image from the clipboard
2. Convert the image to DataURI format
3. Create IMG element with the DataURI source and insert it into the DOM

Take a look at the code below:

if (window.chrome) {
    var elem = document.getElementById("myIframe");
    elem.onload = function () {
        elem.contentWindow.addEventListener(
          "paste", function (event) {
            var me = this;
            var items = (event.clipboardData ||
                event.originalEvent.clipboardData).items;
            var blob = null;
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") === 0) {
                    blob = items[i].getAsFile();
                }
            }
            if (blob !== null) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var image = new Image();
                    image.src = event.target.result;
                    image.onload = function () {
                        var range = 
                            me.getSelection().getRangeAt(0);
                        if (range) {
                            range.deleteContents();
                            range.insertNode(image);
                            me.getSelection().removeAllRanges();
                        } else {
                            me.document.body.appendChild(image)
                        }
                    }
                }
                reader.readAsDataURL(blob);
            }
        })
    }
}

Line 1 Checks the browser for chromness (well Edge if you want to pretend to be Chrome – so be it)
Lines 2-3 Grab the IFRAME element and attach onload event handler so we would know when it’s good and ready
Lines 4-8 Attach onpaste event handler and grab clipboard data when the event fires
Lines 10-14 Loop thru clipboard items and if an image is found – read it as blob file
Lines 16-17 Initiate file reader and attach onload event to it so we know when the reading (that begins on line 29) is complete
Lines 18-20 Create a new IMG element, assign DataURI result from file reader as IMG source and attach onload event so we know when the image loading is complete
Lines 21-29 Check if we’re inserting into or replacing any existing data at the target and if so – inserting image into selected range, otherwise simple append it to the target.

And that’s it – with this addition you’re now able to copy/paste images into Chrome in the same way as old respectable browsers do.

Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+

You know you shouldn’t use showModalDialog to open modal windows – it’s bad taste and prone to cause issues. Unfortunately many applications (especially Enterprise ones) rely on the method ability to halt code execution until the window closed (e.g. user answers a YES/NO question).

Tough luck, starting version 37 Google Chrome removed support for showModalDialog. Your code suddenly began to act in weird and unpredictable way. You definitely should rework it to use a different approach to dialogs. Fortunately Google gives you a bit more time. You can re-enable showModalDialog support, but only temporarily – until May of 2015. Continue reading →

Infragistics WebDataMenu delayed resizing in Chrome

I encountered weird issue using Infragistics ASP.NET WebDataMenu control. If total width of top-level items was bigger than menu’s width and scrolling kicked in – Google Chrome browser produces unexpected results.

Consider following basic markup for Infragistics WebDataMenu:

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px">
   <ClientEvents Initialize="myInit" />
   <GroupSettings Orientation="Horizontal" />
   <Items>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
   </Items>
</ig:WebDataMenu>

It’s a pretty basic markup that defines 10-item horizontal menu with a limited width, so scrolling is enabled. Code in the Initialize event handler would handle some calculation based on menu dimensions and other items on the page would be affected by these calculations. Continue reading →