Paste an image from clipboard using JavaScript [duplicate]

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?

Please do share your thoughts!

Thanks!

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+?

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+?

This is definitely possible now in Chrome and Firefox. I'm not so sure about IE/Safari.

Look at imgur.com, onpaste, and pasteboard.co as examples, and see the code for pasteboard on github as well as Joel's excellent write up on his blog

For the record, you need the user to press Ctrl+V on your element, and then you can capture the data in the paste event handler by reading from event.clipboardData but to make it work down-level, you need to be sure focus is on an empty contenteditable element, and pull the results from there, which doesn't work well in Firefox 22. See here

New browsers, like Firefox 4, support pasting of image data from clipboard into a RTE as Data URI with encoded PNG Data. However, most web applications incorrectly parse these Data URIs and discard it. Yahoo mail properly handles. However Gmail and Hotmail discard it. I have notified Google and Microsoft about this.

Paste an image from clipboard using JavaScript [duplicate]

Related

Recent Posts