The browser allows JavaScript scripts to read and write to the clipboard and automatically copy or paste content, all through the Navigator ClipBoard API. The clipboard can be used as a temporary space to store data and be used within or between applications. The apis for these operations are asynchronous and return a promise.

The Mime type

The MIME type is given when writing to and reading from the clipboard to indicate the type of data being passed. All browser navigator apis support these MIME types.

  • text/plain
  • text/html
  • image/png
  • text/uri-list

Api

  • navigator.clipboard.writeText: Used to write text to the clipboard
  • navigator.clipboard.write: Used to write arbitrary data to the clipboard, either text or binary.
  • navigator.clipboard.readText: Used to copy text data in the clipboard
  • navigator.clipboard.read: Used to copy data from the clipboard, either text or binary (such as images)

navigator.clipboard.writeText

Used to write text content to the clipboard.

Supported browsers

Chrome, Firefox and Safari

Code sample
async function writeDataToClipboard() {
    const result = await navigator.clipboard.writeText("Hello");
    console.log(result);
}
Copy the code

navigator.clipboard.write

Used to write arbitrary data to the clipboard, either text or binary.

Supported browsers

Chrome, Safari, and Firefox support this by setting the asyncClipboard flag with about:config.

Code sample
async function copyImage() {
    const input = document.getElementById("file");
    const blob = new Blob(["sample 2"], { type: "text/plain" });
    const clipboardItem = new ClipboardItem({
        "text/rt": blob,
        "image/png": input.files[0],
    });
    const response = await navigator.clipboard.write([clipboardItem]);
    console.log(response);
}
Copy the code

An error occurs in Chrome when writing a mimeType that is not text, HTML, or an image.

Safari supports the use of promises to blobs to create clipboard items, which is useful in cases where data to write must be obtained from the server.

async function copyImage() {
    const fetchImage = ()=>{
        const input = document.getElementById("file");
        return Promise.resolve(input.files[0]);
    };
    const clipboardItem = new ClipboardItem({
        ["image/png"]:fetchImage()
    });
    const reponse = await navigator.clipboard.write([clipboardItem]);
    console.log(reponse)
}
Copy the code

navigator.clipboard.readText

Used to copy text data inside the clipboard.

Code sample
async (e) => {
    const text = await navigator.clipboard.readText();
    console.log(text);
}
Copy the code

navigator.clipboard.read

Used to copy data from the clipboard, either text data or binary data (such as images), which requires explicit permission from the user.

The error message
  • Read permission denied: There is a prompt on navigator.clipboard.read to allow clipboard access, an error that occurs if the user clicks to block clipboard access when prompted.
  • No valid data on the Clipboard: This error occurs when the clipboard has no text, HTML, or images and contains some other data types or an empty clipboard.
  • The user agent or platform in the previous context did not allow the request, possibly because the user denied permissionIn:navigator.clipboard.read, if the clipboard data is not from the same browser buttonSafariAn additional paste button is displayed. This error is raised if it is not clicked.