Paste an image from clipboard using JavaScript

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

For now i found the clipboardData Object .

But it retrieve only text format or URL from clipboard. clipboardData is IE only, it works with character string and return null if we paste an image.

a test example

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

By default clipboard access is not enabled on firefox, explanation here. On the other way, execCommand() only process text values and is not Firefox compliant.

Like the others said, the fact that code works on IE is a security risk, any site can access your clipboard text.

The easiest way to copy images relative URL is to use a java applet, windows activeX plugin, .net code or drag and drop it.

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.

Unfortunately, It's not possible to paste an image from your clipboard to the RTE.

If you copy a blob from a desktop app like Microsoft Word that contains an image and some text, the image will turn up as a broken reference (though the proportions will be correct) and the text will be pasted correctly (formatting will be lost).

The only thing that is possible is to copy an image within the RTE and paste back within the RTE.