CODEWITHSUNDEEP
javascripthtmlsafari
user1248568
user1248568

Reputation: 621

Safari ClipboardEvent.clipboardData check if image pasted

I need to add additional behavior when user paste image in mobile Safari. I use following code to get clipboardData:

document.getElementById('content').addEventListener('paste', function(e) {
    var clipboardData = e.clipboardData;
// check if image were pasted
}

From this point, how can I check is it image (jpg, png, gif) were pasted or not?

Upvotes: 1

Views: 373

Answers (1)

Josh Lin
Josh Lin

Reputation: 2437

I can't get data from e.clipboardData as it showed noting at all. so I use Editable div instead, then you can check if it is a image inside Editable div, and find what's in it.

document.getElementById("content").addEventListener("paste", function(e) {
  setTimeout(() => {
    var pasted = $("#content").children();
    if (!pasted.length) {
      console.log("nothing pasted!");
      return;
    }
    pasted.map((i, x) => {
      if (x.tagName != "IMG") {
        console.log(x);
        console.log(`${x.tagName} not image`);
        return;
      }
      console.log(`pasted image=[${x.src}]!`);
    });
  });
});
#content {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contenteditable='true'></div>

when you get data-url you can tel jpg or png, if not it will be more complicated, a back-end api is needed

Upvotes: 1

Related Questions