17

I want to be able to copy an image from clipboard, specifically screenshots, and paste them right into a rich text editor, and/or have that file uploaded. We only use chrome so it only has to work for chrome.

http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html

Now, when you’re running the latest version of Google Chrome, you can paste images right from your clipboard too. So if you copy an image from the web or another email, you can paste it right into your message.

Does anyone know if this new gmail feature is something javascript that Id be able to implement myself? Or any other insight into this?

Space Devin
  • 1,127
  • 1
  • 13
  • 17
  • http://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-java-script/4400761#4400761 Firefox (and probably Chrome) pastes images as `` tags with a Data URI as the href. I don't know how Gmail is doing it though. Probably with `event.clipboardData`. – Na7coldwater Jun 18 '11 at 01:50

1 Answers1

20

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!

  • hi,Thanks for good code its work chrome and firefox. But when i try to run i.e it doesn't work. Have you any idea about this? – altandogan Apr 18 '13 at 07:44