9

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)

4
  • 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. Jan 4, 2013 at 5:16
  • have you tried that? I wonder if its too late when you do that 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. Jan 4, 2013 at 21:54
  • 1
    I've recently made a unified interface to capture the pasted image on desktop browsers. github.com/layerssss/paste.js . It now support IE11, Firefox, Chrome. You guys might want to check it out. Nov 10, 2014 at 4:53

2 Answers 2

3
<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.com/4577472

11
  • So FF22 no longer allows this to work. I have been unable to come up with a work-around. Jun 27, 2013 at 17:50
  • Doesn't allow what to work? The diversion of focus during the paste event?
    – Jaykul
    Jul 8, 2013 at 16:59
  • For what it's worth, they may have drastically changed clipboardData in 22. See the next to last item in the Aurora changelog mozilla.org/en-US/firefox/22.0a2/auroranotes and this bug is now marked fixed bugzilla.mozilla.org/show_bug.cgi?id=407983
    – Jaykul
    Jul 8, 2013 at 17:14
  • So yeah, it looks like using clipboardData should work now, but doesn't because of bugzilla.mozilla.org/show_bug.cgi?id=861512
    – Jaykul
    Jul 8, 2013 at 18:34
  • 2
    The clipboardData stuff is definitely working now, but is EMPTY when pasting images. It works fine for pasting image FILES though... Anyway, after playing with this for ... far too long, I've filed a bug against Firefox.
    – Jaykul
    Jul 9, 2013 at 6:21
0

No. There isn't another way.

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

1
  • I have not seen any examples on how to paste images using a flash bridge, I suspect it is not supported Jan 7, 2013 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.