I was reading through this article about image pasting in Chrome and Firefox.

To recap, Firefox does not provide any information about the image pasted, the "paste" event handler gets a null clipboardData object.

To work around, one places an invisible contenteditable div in the DOM and always keeps it in focus, when stuff is pasted it triggers a timeout that checks the contents of the invisible div to grab an image handle.

Is there any way to hack stuff using magic iframes or what-not, short of replacing the textarea with a contenteditable div, to get paste-image-support in Firefox?

_{(note: Java and Flash solutions are out of the question)}

I was reading through this article about image pasting in Chrome and Firefox.

To recap, Firefox does not provide any information about the image pasted, the "paste" event handler gets a null clipboardData object.

To work around, one places an invisible contenteditable div in the DOM and always keeps it in focus, when stuff is pasted it triggers a timeout that checks the contents of the invisible div to grab an image handle.

Is there any way to hack stuff using magic iframes or what-not, short of replacing the textarea with a contenteditable div, to get paste-image-support in Firefox?

_{(note: Java and Flash solutions are out of the question)}

• javascript
• firefox

• You can focus the content-editable div in the document.onpaste method. This should allow you to not force focus on that div the entire time. – Buildstarted Commented Jan 4, 2013 at 5:16
• have you tried that? I wonder if its too late when you do that – Sam Saffron Commented Jan 4, 2013 at 6:56
• I saw the trick being used on another site a while back. I'll see if I can find it if you'd like. – Buildstarted Commented Jan 4, 2013 at 21:54
• 1 I've recently made a unified interface to capture the pasted image on desktop browsers. github./layerssss/paste.js . It now support IE11, Firefox, Chrome. You guys might want to check it out. – Michael Yin Commented Nov 10, 2014 at 4:53

2 Answers 2

<div id="paste" contenteditable="true"></div>

Insert this item into your html then call the following

var pasteDiv = $("#paste")[0];
document.body.onpaste = function (event) {
    pasteDiv.focus();
    //do your magic firefox here
};

The onpaste fires here because you have your contenteditable div and you can then tell firefox where to focus this clipboard data. (without having at least one contenteditable item the onpaste doesn't fire)

For a working sample see: https://gist.github./4577472

No. There isn't another way.

*Invisible contenteditable div or Java Applets that run in the browser are two methods notwithstanding.