CODEWITHSUNDEEP
javascriptgoogle-chromeclipboard
Space Devin
Space Devin

Reputation: 1137

Paste image into rich text (like gmail)

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?

Upvotes: 17

Views: 11551

Answers (1)

user140628
user140628

Reputation:

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!

Upvotes: 21

Related Questions