Id It possible when an image (for example) is pasted from the clipboard into a webkit editable content region, and the source code looks like this:

webkit-fake-url://DCAC99B9-BA40-4BA7-A419-9C60AAB081DA/image.png 

to be able to access the image via javascript to send back to the server along with the text?

Id It possible when an image (for example) is pasted from the clipboard into a webkit editable content region, and the source code looks like this:

webkit-fake-url://DCAC99B9-BA40-4BA7-A419-9C60AAB081DA/image.png 

to be able to access the image via javascript to send back to the server along with the text?

• javascript
• web-applications
• image-processing

Share Improve this question Follow edited Nov 5, 2010 at 17:35 Sarfraz 383k8282 gold badges559559 silver badges612612 bronze badges asked Nov 5, 2010 at 17:33 user498611user498611 12111 silver badge33 bronze badges 3

• Can you be a little more descriptive as to where you're inserting these images from/to, and where you're getting the webkit-fake-url from? – Anthony Corbelli Commented Nov 5, 2010 at 21:56
• @GetFresh, this occurs when pasting actual image data into the contentEditable field (eg. copying an image from another application or another webpage). – eyelidlessness Commented Nov 10, 2010 at 19:55
• 1 To reproduce the a above behavior. 1) In a webkit browser right click an image & choose "Copy Image" 2) Go to ckeditor./demo 3) Use keyboard shortcuts to paste the image into the editor 4) Click the "Source" button in CKEditor to see the new <img> tag. – metavida Commented Dec 17, 2010 at 17:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Obviously you can use whatever abstraction for event listeners you like; I'm providing an unabstracted version; this will also exclude IE < 9

if('addEventListener' in editableElement) {
    editableElement.addEventListener('paste', function(e) {
        // First two conditionals should weed out browsers which
        // don't allow access to pasted content
        if(('clipboardData' in e) && ('types' in e.clipboardData) &&
            e.clipboardData.types.indexOf('public.url') > 1) {
            e.target.ownerDocument.execCommand('insertImage', null,
                e.clipboardData.getData('public.url'));
            e.preventDefault();
            e.stopPropagation();
        }
    }, false);
}

When dealing with weirdness in WebKit pastes, it's a good idea to inspect the paste event's clipboardData:

console.dir(eventObj.clipboardData);

But in my experience, Web Inspector seems to inspect the live object in memory at the time the console is displayed, rather than the object at the time and in the scope console.dir was called. By this point, the paste event will have ended and Javascript's access to the clipboard will have been revoked, so that the types property will be null and the actual clipboard data will be hidden. But in your event, you can do this to get a better idea of what types are available and what their output would be:

for(var i = 0; i < eventObj.clipboardData.types.length; i++) {
    console.log(eventObj.clipboardData.types[i] + ':',
        eventObj.clipboardData.getData(eventObj.clipboardData.types[i]));
}

I've spent more time than I'd like to admit debugging clipboardData in WebKit browsers. Hope this helps!