Getting the contents from client's clipboard like this website

Question

Can someone explain how does this website accesses the contents of the clipboard and displays it?

http://snag.gy

I am working on a similar project and need to make use of this functionality where users can ctrl+v paste an image. Also, if the site is using Java plug-in, why doesn't my chrome pop up out-of-date warning?

Any help is appreciated!

Thank you.

Answer 1

You should be able to tell that by looking at the source (http://snag.gy/assets/js/index.min.js). The code will be unreadable since it's minified, but you can make it readable with a code beautifier (such as http://jsbeautifier.org/).

It uses a java applet to read your clipboard (it's adding it to the page dynamically). It also contains a reference to http://code.google.com/p/zeroclipboard/ which is a flash-based solution mentioned here . I saw that it also makes use of the clipboardData object.

Looks like there are several fallbacks depending on the browser, and also it uses different mechanisms based on the origin of the copied data. You could start with How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+? and fallback to a java applet if the browser is older.