How to get an image from the clipboard with the click of a button?

Question

I am trying to get the image stored on the clipboard using jQuery. So far, I have managed to find a solution that works fine using the onpaste event. But, according to the requirements, I want to use the same functionality in the “click on a button” instead of the “insert” event. I tried putting the same code in a button click event, but no luck. What am I missing here?

Here is my jsfiddle

If possible, tell me how I can do the same in IE (10 and above) and Mozilla Firefox.

Exapmle: Demo Applet

Answer 1

As stated in mozdev, this feature should be available in FF from version 22. https://developer.mozilla.org/en-US/docs/Web/Events/paste

"Caniuse" claims to be too btw: http://caniuse.com/#feat=clipboard

You may need to use a browser prefix or the event attributes have different names. Your event does not fire in a different browser than chrome, or is it fired, but you are not receiving data?

EDIT: Also, "paste" is an event; you cannot fire it manually with a button. (Well, you can, but that doesn't make any difference.) It doesn't make sense because you cannot access the buffer directly for security reasons, and therefore you have no data available. in the browser. With the button, you should use the file selection and upload method, which, it seems to me, needs the web server in the reverse order to process the request, so there is no clean js solution.