Pasting from a file browser and HTML5 Clipboard API

Question

I'm trying to add an image paste function to my web application, using the standard routine:

$('textarea').on('paste', function (ev) {
    var clipboardData = ev.originalEvent.clipboardData;

    $.each(clipboardData.items, function (i, item) {
        if (item.type.indexOf("image") !== -1) {
            var reader = new FileReader();

            reader.readAsDataURL(item.getAsFile());
            reader.addEventListener('loadend', ...);
            ...
        }
    });
});

The full sample can be found here: http://jsfiddle.net/t8t2zj6k/

It works correctly when I copy & paste an image from an image viewer software, but when I'm trying to do the same thing using a file browser (e.g. Finder on Mac or Nautilus on Linux) as a result I get only a text string with the file path or even an image with file type icon instead of an original file.

Is there any way to handle pastes from a file browser properly?

Possibly this could help you? stackoverflow.com/questions/6333814/… — lemieuxster
– lemieuxster, Commented Apr 18, 2015 at 22:34
@lemieuxster, thanks, but unfortunately I'm already using the exact same solution provided in the accepted answer. My case is a bit different - while the basic paste function is working well, there's an issue with pasting from Finder. — NikitaBaksalyar
– NikitaBaksalyar, Commented Apr 18, 2015 at 22:50
Seems to maybe be an issue with Chrome? I don't see anything in Safari or Firefox. code.google.com/p/chromium/issues/detail?id=361980 — lemieuxster
– lemieuxster, Commented Apr 18, 2015 at 23:19
@lemieuxster, thank you! The bug report totally explains this weird behavior. Perhaps you should add it as an answer to the question so that I can accept it? — NikitaBaksalyar
– NikitaBaksalyar, Commented Apr 18, 2015 at 23:37

NikitaBaksalyar · Accepted Answer · 2015-04-20 13:46:30Z

3

Seems to maybe be an issue with Chrome? I don't see anything in Safari or Firefox. http://code.google.com/p/chromium/issues/detail?id=361980

edited Apr 20, 2015 at 13:46

NikitaBaksalyar

2,5241 gold badge24 silver badges27 bronze badges

answered Apr 19, 2015 at 0:31

lemieuxster

1,0817 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michelek · Accepted Answer · 2017-09-12 07:51:45Z

1

Maybe you would like to paste image as data:

Go look at HTML5 paste image to page

answered Sep 12, 2017 at 7:51

michelek

2,5661 gold badge15 silver badges17 bronze badges

Collectives™ on Stack Overflow

Pasting from a file browser and HTML5 Clipboard API

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related