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