ClipboardEvent.clipboardData's value is a DataTransfer, but DataTransfer.files isn't cross browser

[tomayac]

By looking at compatibility data for DataTransfer.files and ClipboardEvent.clipboardData, developers might think copying a file in their operating system's file explorer and pasting it into a web application would work universally, since the support tables are all green. In practice, the code below is Chrome-only, though:

document.addEventListener("paste", async e => {
  e.preventDefault();
  if (!e.clipboardData.files.length) {
    return;
  }
  const file = e.clipboardData.files[0];
  // Read the file's contents, assuming it's a text file.
  // There is no way to write back to it.
  console.log(await file.text());
});

1. Go to your file explorer and copy an image file.
2. Go to SVGco.de.
3. Try pasting the image via the browser's native Edit menu.

On Safari, with an image file on the clipboard, the Paste action is grayed out:

On Chrome, with an image file on the clipboard, the Paste action is enabled:

It would be great if the support situation for ClipboardEvent.clipboardData.files could be reflected more accurately.

[tomayac]

CC: @chrisdavidmills.

[tomayac]

There's another testing tool that may help understand better what's going on: https://madebyevan.com/clipboard-test/.

When copying a JPG file from the file explorer and pasting it, this is what happens when pasting in the input field via cmd + v:

• Chrome: pastes the JPG file as a JPG image
• Safari: pastes the JPG file as a JPG image
• Firefox: converts the JPG file on the fly to PNG and pastes the PNG image

Interestingly the Edit > Paste menu, unlike in my previous test, was not grayed out on Safari this time.

[tomayac]

The difference between the two implementations is document.addEventListener('paste', () => {}) in https://svgco.de/ vs. input.addEventListener('paste', () => {}) in https://madebyevan.com/clipboard-test/, so the latter listens on an element on the page, whereas the former on the document, so it's Document: paste event vs. Element: paste event. Both are ClipboardEvents.