Reading Clipboard Images in IE

Question

I can successfully read Clipboard images in Chrome using the following code:

data = event.originalEvent.clipboardData;

for (var i = 0; i<data.items.length; i++){
        var item = data.items[i];
        if (item.type === 'image/png'){
             itemFound = true;
             break;
        }
}

This approach does not work in IE however. Microsoft posted a blog about pasting in IE (http://blogs.msdn.com/b/ie/archive/2013/10/24/enhanced-rich-editing-experiences-in-ie11.aspx). The blog states that I should be able to use the following line of the code

var fileList = clipboardData.files;

fileList always comes back as empty however.

Does anyone know a way of accessing clipboard images in IE? I am able to read text fine, just not images.

Answer 1

Assuming that you are using a ClipboardEvent(), have you tried the following?

var data = event.clipboardData || event.originalEvent.clipboardData;

Or could it be as simple as changing your code to reference the window object?

var fileList = window.clipboardData.files

Answer 2

You just listen to the paste event and using the interval catch the point of time when the image is already created but still not rendered. Then you simply get the image source and empty the editor.

The following code implements this algorithm. When you run it in IE or Firefox the result will be the same as the previous sample's results in Chrome and Opera:

<script type="text/javascript">
$(document).ready(function() {

  $('#editor').on('paste', function (e) {
    $('#editor').empty();
        var waitToPastInterval = setInterval(function () {
            if ($('#editor').children().length > 0) {
                clearInterval(waitToPastInterval);
        $('#result').html($('#editor').find('img')[0].src);
        $('#editor').empty();
            }
        }, 1);  
  });

});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable=true></div>
<div id='resultcnt'>Copyed image src:<br />
  <div id='result'></div>
</div>

<style  type="text/css">
#editor{
  width: 500px;
  min-height: 40px;
  border: solid 1px gray;
  padding: 4px;
}
#resultcnt{
  width: 100%;
  margin-top: 16px;
}
#result{
  display: block;
  max-width: 90%;
  margin: 16px 0 32px 0;
  font-size: 12px;
  color: blue;
  overflow: visible;
  word-break: break-all;
}
</style>

Check out this thread: How do i get base64 encoded image from clipboard in internet explorer?