Copy and paste images to the clipboard in React

DanielNovember 23, 2023November 27, 2023

Let's see how we can use the navigator.clipboard API to programmatically copy and paste images in React.

We have explored in a previous article how to copy text to clipboard in React, but with images, it is a bit more complicated.

By the end of this example, we will build the example from the below video:

If you want to skip ahead here is the full code on GitHub, and here is the live example.

Coping an image to the clipboard using React

The example will use the below HTML:

return (<div>
    <button onClick={()=> copyImgToClipboard('cat')}>
        Copy a 😸 to clipboard
    </button>
    <button onClick={()=> copyImgToClipboard('dog')}>
        Copy a 🐶 to clipboard
    </button>
    <button onClick={pasteImg} className="btn-paste">
        PASTE
    </button>
    <img src={imgData} />
</div>)

The magic happens in the copyImgToClipboard() method, where we first fetch the image data and convert it to a blob format. I've written here a more in-depth tutorial about how to use React to fetch an image and convert it to blob.

After that, we can package the blob data in a ClipboardItem object and place it in the navigator's clipboard using the write() method.

const copyImgToClipboard = async (animal)=> {
    const URL = `https://www.js-craft.io/_public-files/img-${animal}.png`
    try {
        const copiedImage = await fetch(URL)
        const blobData = await copiedImage.blob()
        const clipboardItemInput = new ClipboardItem({'image/png' : blobData})
        navigator.clipboard.write([clipboardItemInput])
    } catch(e) {
        console.log(e)
    }
}

By the way, we can use this approach to copy also other file types, not just images.

Pasting the image from the clipboard using React

In order to manage the pasted images we will use a state variable named imgData.

In this case, the paste operation is triggered by a button click, but we can use also the paste Clipboard event for listening to events such as CTRL+V.

const [imgData, setImgData] = React.useState()
// ... 
const pasteImg = async ()=> {
    try {
        const clipboardItems = await navigator.clipboard.read()
        const blobOutput = await clipboardItems[0].getType('image/png')
        const data = URL.createObjectURL(blobOutput)
        setImgData(data)
    } catch(e) {
        console.log(e);
    }
}

The actual image blog data is wrapped by the createObjectURL() method in a readable format.

Note that due to security concerns, you will need to give extra permission for the copy and paste operations. The Google team has a really good article about this subject here.

Here is the full code on GitHub, and you can play with the final live example here.