0
206
Viewshow to get an image with text on paste event
I am having a problem getting an image that has been pasted and copied with the user along with some text, I made my paste function as follows.
const PasteFunction = (event) => {
let paste = (event.clipboardData || window.clipboardData).getData("text");
if (
paste.includes("svg") ||
paste.includes("jpg") ||
paste.includes("jpeg") ||
paste.includes("gif") ||
paste.includes("pdf") ||
paste.includes("tiff") ||
paste.includes("raw") ||
paste.includes("png") ||
paste === "" ||
paste === undefined ||
paste === null
) {
event.preventDefault();
return;
}
var text = (event.originalEvent || event).clipboardData.getData(
"text/html"
);
document.execCommand("insertHTML", true, text);
};
what currently happens is that, if the user copies only the image, I prevent it from being pasted in my richContentText, but if the user decides to copy an image with a portion of text, this code that I currently have cannot recognize that this text has an image, and lets it pass automatically... which if something that im trying to prevent.
So as long as there is text, inside the clipboardData it will be pasting it even if it has an image or not in that data... does anyone have an idea how I can find this out?
example I would like to prevent the user from pasting the content of the image I show below if he decides to copy it along with the image
1 answers
Answer question0
i change my paste function for what "first last" told me:
const PasteFunction = (event) => {
var text = (event.originalEvent || event).clipboardData.getData(
"text/html"
);
const parser = new DOMParser();
const doc = parser.parseFromString(text, "text/html");
var image = doc.querySelector("img");
if (image) {
event.preventDefault();
return;
}
document.execCommand("insertHTML", true, text);
};