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?

1 Answers

Answers 1

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

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati