As I recall, the problem isn't getting the event (that's relatively straightforward), it's reading image data out of it. At least as of a year ago, Safari and Firefox did not let you read image data from a paste.

At that time, it was technically possible to implement support in Firefox by refocusing a hidden <div /> with contentEditable, then examining the pasted data and copying it back to whatever the original target was, but the complexity of doing that is unreasonably high. This is what Imgur did at the time, but they don't have to worry about handling normal text.

I can look at this again, but I suspect nothing has changed. In particular, copy/paste still doesn't work on Imgur in Safari. It works fine in Chrome, and it works in Firefox (but presumably because they still use the high-complexity contentEditable stuff).

Not important to me, just wanted to fill in the details for when it does come up again.

altendky added a subscriber: altendky.Nov 17 2015, 4:51 PM

chad added projects: Safari, Firefox.Jan 27 2016, 6:40 PM

epriestley merged a task: T11253: Make it possible to paste images.Jul 1 2016, 7:19 PM

epriestley added a subscriber: eadler.

eadler added a project: Restricted Project.Jul 1 2016, 9:28 PM

epriestley added a project: Prioritized.Jul 1 2016, 9:35 PM

From the Firefox bug and this linked one:

https://bugzilla.mozilla.org/show_bug.cgi?id=906420

...it looks like this stuff is being actively addressed in Firefox (updates to tickets within the last few days). Not clear if that actually means it will be available in a release any time soon, but it does makes a Firefox-only contentEditable hack less attractive because it would presumably be short-lived.

This doesn't appear to even to be possible in Firefox. Here's a simple example:

<!doctype html>
<html>
  <head>
    <script type="text/javascript">
      var onpaste = function() {
        document.getElementById('pasteNode').focus();
      };

      window.addEventListener('paste', onpaste, true);
    </script>
    <style type="text/css">
      body { background: grey; }
      textarea { width: 400px; height: 200px; }
      div { width: 400px; height: 200px; background: white; }
    </style>
  </head>
  <body>
    <textarea id="typeNode"></textarea>
    <div contenteditable="true" id="pasteNode"></div>
  </body>
</html>

Paste text into the <textarea /> (the top box). If things work, an image will appear on the bottom box.

In Safari, the focus() fires before the paste, so the content ends up in the <div />. This would potentially let us inspect the content and extract any pasted images. This appears viable in Safari, except that it doesn't seem possible to extract the image data (?), e.g. see:

https://bugs.webkit.org/show_bug.cgi?id=49141

(Note also that Gmail does not appear to support pasting images in Safari: when you paste an image, it just removes it. I suspect there is no workaround and that no site supports pasting images in Safari.)

In Firefox, the paste fires before the focus() so the content doesn't go into the contentEditable div, so we can't get it.

Gmail (and presumably other applications) have the user edit text in a contentEditable div, not a <textarea />.

Imgur sues a similar strategy to the above, but it starts without an editable element focused. In this situation, Firefox has different behavior: the refocus works and the content ends up in the <div />.

Upshot:

I believe support is currently impossible in Safari. I suspect no site exits which provides Safari support (for pasting an image, and transferring it to the server). This is not supported by Gmail, Mediawiki, or Imgur.
I believe support is possible in Firefox in four ways:
- If anyone can modify the snippet above to get the image into the <div /> (focus textarea, paste image, image ends up in div), I believe all remaining parts are possible, merely complex.
- We can wait for Firefox to fix this, which looks like it might be close.
- We can convert remarkup to use a <div /> with contentEditable instead of a <textarea />. This runs into WYSIWYG editing (see T337, T1304, etc). We need an unlimited budget to pursue this. It is likely a change comparable in complexity to Wikimedia's VisualEditor, which has been in development for at least three years and has roughly as many commits as Phabricator itself does.
- As Firefox is open source and accepts contributions, we can fix this in Firefox. No clue how long this would take, but the cost would be smaller than WYSIWYG development.

epriestley removed a project: Prioritized.Jul 2 2016, 7:17 PM

eadler moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.Aug 5 2016, 4:40 PM

I'm observing same issue in current ChromeOS 55.0.2858.0 dev branch.
At the same time image paste works in Telegram web client (seems that they use contentEditable div instead of textarea)
Do you know whether it's a chrome os bug or google deprecated DataTransfer.items in new chrome's?

I can't reproduce this in Chrome (OS X, Version 53.0.2785.116 (64-bit)) so it may be a behavioral change in Chrome.

Linux Chrome dev channel 55.0.2859.0 (64-bit) have no issues with image paste.
Seems that it is ChromeOS specific issue.

Can't paste images from clipboard in Firefox / SafariOpen, Needs TriagePublicActions

Description

Related Objects

Event Timeline

Can't paste images from clipboard in Firefox / Safari
Open, Needs TriagePublic
Actions