Detect the Content Type in the Clipboard

By  on  

A user's clipboard is a "catch all" between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select "Copy Image". That made me think about how developers can detect what is in the clipboard.

You can retrieve the contents of the user's clipboard using the navigator.clipboard API. This API requires user permission as the clipboard could contain sensitive data. You can employ the following JavaScript to get permission to use the clipboard API:

const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
  // Clipboard permissions available
}

With clipboard permissions granted, you query the clipboard to get a ClipboardItem instance with details of what's been copied:

const [item] = await navigator.clipboard.read();

// When text is copied to clipboard....
item.types // ["text/plain"]

// When an image is copied from a website...
item.types // ["text/html", "image/png"]

Once you know the contents and the MIME type, you can get the text in clipboard with readText():

const content = await navigator.clipboard.readText();

In the case of an image, if you have the MIME type and content available, you can use <img> with a data URI for display. Knowing the contents of a user's clipboard can be helpful when presenting exactly what they've copied!

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

Discussion

  1. Hi David,

    Thank you for sharing this useful article on how to detect clipboard content using JavaScript. I learned a lot from your code examples and explanations. I especially liked how you used the Clipboard API to access different types of data, such as text, images, and files.

    I have a question though: how can I check if the clipboard contains data in a specific format, such as HTML or CSV? I know that in.NET Framework, there are methods like ContainsFormat and GetData that can do this[^1^][1], but I’m not sure how to do it in JavaScript. Do you have any suggestions or resources on this topic?

    Thanks again for your great work!

  2. I believe the permissions are clipboard-read, not clipboard-write.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!