Summary: | Can't read images via Clipboard API | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Noah Chase <nchase> | ||||
Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | NEW --- | ||||||
Severity: | Normal | CC: | miikka.veijonen, webkit-bug-importer, wenson_hsieh | ||||
Priority: | P2 | Keywords: | InRadar | ||||
Version: | Safari 14 | ||||||
Hardware: | All | ||||||
OS: | All | ||||||
Attachments: |
|
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). 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) Is this the same issue that I reported earlier this year here: https://bugs.webkit.org/show_bug.cgi?id=218519 ? Hi Miikka! Looks the same based on your description! |
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> ```