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
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

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!