Paste an image from clipboard using JavaScript [duplicate]

Question

How do we paste an image from clipboard into a custom rich text editor using javascript? (ctrl+c and ctrl+v or a snapshot).

Has anyone used Ajax's rich text editor? Does pasting an image from clipboard to Ajax RTE work?

Answer 1

Because this question still often shows up in Google's search results, I want to point out this is possible today, at least in Google Chrome (2011) in all modern browsers (2018). They implemented it to use in GMail, but it is available for all websites.

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

Answer 2

To help others, I'll leave the link here with the answer made by Nick Rattalack

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; // data url!
      reader.readAsDataURL(blob);
    }
  }
}

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?