Bug 229377 - Can't read images via Clipboard API
Summary: Can't read images via Clipboard API
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari 14
Hardware: All All
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-08-21 17:05 PDT by Noah Chase
Modified: 2021-09-04 12:44 PDT (History)
3 users (show)

See Also:

Correct number of ClipboardItems, but no usable data. (55.21 KB, image/png)
2021-08-21 17:05 PDT, Noah Chase
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Noah Chase 2021-08-21 17:05:15 PDT
Created attachment 436098 [details]
Correct number of ClipboardItems, but no usable data.

When I use the Clipboard API to grab items that a user pastes into a text input, I see ClipboardItems, but they're always empty  (i.e. no `types`, no `presentationStyle`). 

I'm interested in taking the blob data that represents the file and uploading it to a server for the user as an attachment, after they use the Safari-provided paste option from the edit menu.

For example, if I paste two images this way, they appear as follows when I console.log them – see attachment (note that there are no `types`, and it seems there's no way to get at the file blobs).

Here's a minimal example that will reproduce the issue:

<input type="text" id="textInput" placeholder="paste clipboard contents here" style="width: 100%" />

  document.getElementById("textInput").addEventListener('click', (event) => {
    navigator.clipboard.read().then((data) => {

Comment 1 Wenson Hsieh 2021-08-24 07:55:16 PDT
Thanks for the report! Just a couple of quick questions:

- Are you testing this against an `https` website?
- Where are you copying the image from? Does this reproduce for images copied from elsewhere on the web? (i.e. right click > Copy Image).
Comment 2 Noah Chase 2021-08-28 08:54:47 PDT
Hi Winston!

- Yes, this is an https website.
- I'm copying this image from a file on my Desktop. The behavior is different when I copy an image from the web. That seems to work (it has an array of `types` that includes `"image/png"`, which seems right)
Comment 3 Radar WebKit Bug Importer 2021-08-28 17:06:22 PDT
Comment 4 Miikka 2021-09-04 07:22:52 PDT
Is this the same issue that I reported earlier this year here: https://bugs.webkit.org/show_bug.cgi?id=218519 ?
Comment 5 Noah Chase 2021-09-04 12:44:28 PDT
Hi Miikka! Looks the same based on your description!