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.
.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?
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?
Share Improve this question asked Jun 18, 2011 at 1:25 Space DevinSpace Devin 1,1371 gold badge14 silver badges18 bronze badges 1 |1 Answer
Reset to default 21I 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!
<image>tags with a Data URI as the href. I don't know how Gmail is doing it though. Probably withevent.clipboardData. – Na7coldwater Commented Jun 18, 2011 at 1:50