Copy/Paste Multiple Images onto ClipboardData (Clipboard API)

Viewed 505

I am using a Quill editor, extending the Clipboard module.

I have an onPaste event that is triggered when a person copies from their clipboard onto the editor.

When I try to copy 1 image to my clipboard, my clipboardData.items contain an item of type 'image' and kind 'file'. Here is an example of how I loop through my items to check my images.

const items = (e.clipboardData || e.originalEvent.clipboardData).items;
for (let i = 0; i < items.length; i++) {
    let image = null;
    if (items[i].type.indexOf('image') === 0) {
        image = items[i].getAsFile();
    }
}

Now when I attempt to copy multiple images (say 2, for the simplest example), rather than having multiple images in my clipboardData.items, it reads the entire clipboardData as a text/rtf. So now, the code above never goes into the if loop, since there are no 'image' types. Thus, I am unable to parse any images and get the image files.

Extending further, if I try to add a matcher (which essentially pulls all specified elements from the clipboardData), I am able to retrieve all the HTML tags.

Example:

this.quill.clipboard.addMatcher('img', (node, delta) => {
    console.log(node, delta);
    // Here, my node and delta provide me with the <img> HTML element   
});

So I know that my clipboardData should have all the images inside, but rather than the clipboardData.items having multiple Image-type items for multiple images, it reads as just as 1 "element" that is of type "text/rtf".

Does anyone know if one is able to use the Javascript Clipboard API for multiple images copy/pasted into the clipboard?

Thank you

0 Answers
Related