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.

No way, I've been working on this and it really pissed me off. Use Chrome to safe my life. — Romi, May 27 '15 at 01:39
Am sure there is a way. I have seen other sites achieve it. Can't just use Chrome, I require a working solution on both IE and Chrome — illwalkwithyou, May 27 '15 at 15:26
@illwalkwithyou, have you been able to solve this? I have been stuck at the same point. — user61034, Feb 06 '20 at 21:38

Ed Lucas · Answer 1 · 2020-02-11T18:33:48.543

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

edited Feb 11 '20 at 18:33

answered Feb 10 '20 at 00:19

Ed Lucas

5,955
4
30
42

The clibboardData has text but does not have images. – user61034 Feb 10 '20 at 16:37
I did more research, but could not find image support for the IE clipboard. – Ed Lucas Feb 11 '20 at 18:14
1

Apparently IE supports :https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265023(v=vs.85)?redirectedfrom=MSDN#clipboard-support-for-images – user61034 Feb 11 '20 at 18:16

score 1 · Answer 2 · answered Feb 13 '20 at 21:13

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?

Reading Clipboard Images in IE

2 Answers2