How Does the Paste Image from Clipboard Functionality Work in Gmail and Google Chrome 12+

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

I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReader on it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // might give you mime types
    for (var 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);
        }
    }
};

Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.

Edit: Note that the item is of type DataTransferItem. JSON.stringify might not work on the items list, but you should be able to get mime type when you loop over items.

JavaScript: How does pasting images into Gmail work?

Seems my initial intuition about this was wrong, but this has actually been answered here: How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

For online images, google actually uses a reference to the original images http location. For images pasted locally, google uploads the image onto its own (cache) server and then sends the [img src '' /] pointing to that.

Yikes! Scary stuff, eh? Better not leave any confidential information in your clipboard (image, passwords, etc). and then unmindfully paste into a website that may be sniffing

Button to get image from clipboard using web app

If you request the clipboardRead permission, you can use document.execCommand("paste").

A good explanation for how to do that is https://stackoverflow.com/a/7147192/689161

Edit: some sample code

background.html

<div id="idk" contenteditable="true"></div>

background.js

function paste() {
    var div = document.getElementById("idk");
    div.focus();
    document.execCommand("paste");

    // you can now access whatever was pasted through div.innerHTML
    console.log(div.innerHTML);
}

If the user pastes an image, it'll show up as something like <img src="..."/> and you can extract that for use in your application.

Paste image into rich text (like gmail)

I believe Na7coldwater is correct. The event.clipboardData is being utilised. Please see the following proof of concept:

<html>
<body>
    <div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div>
    <script type="text/javascript">
        document.getElementById("rte").focus();
        document.body.addEventListener("paste", function(e) {
            for (var i = 0; i < e.clipboardData.items.length; i++) {
                if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
                    // get the blob
                    var imageFile = e.clipboardData.items[i].getAsFile();

                    // read the blob as a data URL
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(e) {
                        // create an image
                        var image = document.createElement("IMG");
                        image.src = this.result;

                        // insert the image
                        var range = window.getSelection().getRangeAt(0);
                        range.insertNode(image);
                        range.collapse(false);

                        // set the selection to after the image
                        var selection = window.getSelection();
                        selection.removeAllRanges();
                        selection.addRange(range);
                    };

                    // TODO: Error Handling!
                    // fileReader.onerror = ...

                    fileReader.readAsDataURL(imageFile);

                    // prevent the default paste action
                    e.preventDefault();

                    // only paste 1 image at a time
                    break;
                }
            }
        });         
    </script>
</body>

Gmail uploads the image via XMLHttpRequest instead of embedding it directly as a data URL. A search on Google or SO for drag & drop file uploads should reveal how this can be achieved.

Please bare in mind that this is just a proof of concept. Error handling and browser/feature detection code is not included.

Hope this helps!

Pasting from a file browser and HTML5 Clipboard API

Seems to maybe be an issue with Chrome? I don't see anything in Safari or Firefox. http://code.google.com/p/chromium/issues/detail?id=361980

How Does the Paste Image from Clipboard Functionality Work in Gmail and Google Chrome 12+