mdn / mdn/browser-compat-data

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

Open
#18,140 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

browser:multiple data:api
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

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:

Screenshot 2022-11-04 at 11 26 51

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

Screenshot 2022-11-04 at 11 27 33

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the compatibility data for DataTransfer.files and ClipboardEvent.clipboardData, then reproduce the file-paste steps in Safari and Chrome. Update the relevant browser support data so the displayed support reflects the observed behavior, and verify the resulting compatibility tables.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.