Bug 229377 – Can't read images via Clipboard API

• Status: NEW
• Component: New Bugs

[Noah Chase]

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%" />

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

    event.preventDefault()
  })
</script>
```

[Wenson Hsieh]

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).

[Noah Chase]

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)

[Radar WebKit Bug Importer]

<rdar://problem/82482067>

[Miikka]

Is this the same issue that I reported earlier this year here: https://bugs.webkit.org/show_bug.cgi?id=218519 ?

[Noah Chase]

Hi Miikka! Looks the same based on your description!