[Safari] Pasting fragment of an image does not trigger its upload

[Piotrek Koszuliński]

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Open an image in Preview.
3. Select part of it and copy.
4. Paste it into the editor.

Pasted image wasn't uploaded. In the data we can find <img src="webkit-fake-url://e303f4ea-3e1d-4c51-a83d-52707aeeb397/image.tiff" />

[Piotrek Koszuliński]

The first step here is to research if it is possible in any way to get that image. It may happen that it is not and then we'll just drop this ticket.

[Olek Nowodziński]

Replying to Reinmar:

The first step here is to research if it is possible in any way to get that image. It may happen that it is not and then we'll just drop this ticket.

Yes. It was exactly my intention.

[Olek Nowodziński]

I've spent hours trying to access pasted image in Safari (8.0.5) but to no avail. It's a well-known problem:

• ​https://bugs.webkit.org/show_bug.cgi?id=49141
• ​https://dev.ckeditor.com/ticket/8881
• ​http://stackoverflow.com/questions/4108459/javascript-webkit-fake-url
• ​https://pihole.wordpress.com/2012/04/12/webkit-fake-url-breaks-the-web/ (this one is desperate but I like it)

However it looks like Webkit team does not care.

---

Strategies

ClipboardData

I investigated using the following listener

editor.on( 'instanceReady', function() {
	this.editable().$.addEventListener( 'paste', function( evt ) {
		var types = evt.clipboardData.types;

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

which returns

types public.tiff  0

types image/tiff  0

types dyn.ah62d4rv4gu8zazwuqm10c6xemf1gq54uqm10c6xenv61a3k <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>srcImageElementUUID</key>
	<string>BB12DFD9-0BB6-49CA-A91C-916DF58F2AC9</string>
	<key>sushi</key>
	<false/>
	<key>twoRepresentations</key>
	<false/>
</dict>
</plist>
 344

types PVPboardInfoPboardType  0

and this is the only information obtainable from the event (pretty useless). I Googled to find some documentation about the mystic XML but there is none.

XHR

Any XHR request to webkit-fake-url fails with the following message:

XMLHttpRequest cannot load webkit-fake-url://848278f6-d10c-42fa-9f4a-e3cb7c77849c/image.tiff. Cross origin requests are only supported for HTTP.

so it's a dead end.

Canvas

I tried to load the webkit-fake-url image into canvas (with canvas.drawImage()), and then canvas.toDataURL() to obtain base64-encoded image. It fails silently and the image is not loaded into canvas.

I tried to bypass that problem by copying the image like

var imgCopy = new Image();
imgCopy.onload = function() {
	// then try to draw imgCopy on canvas
};
imgCopy.src = webkitFakeUrlImg.src;

but just like XHR attempt, it ends up with same origin policy error.

[Olek Nowodziński]

Webkit team has just closed the issue ​https://bugs.webkit.org/show_bug.cgi?id=49141. There's a good chance we'll be able to deal with this problem soon.

[Olek Nowodziński]

Related Webkit issue ​https://bugs.webkit.org/show_bug.cgi?id=19893.

[blevine218]

Any update on this issue? I'm still seeing this issue when pasting images into the editor in Safari. From the links posted above referencing the associated webkit issues, the webkit issues appear to have been fixed. It wasn't clear to me whether additional work needed to be done on the CKEditor side.

[Jakub Ś]

@blevine218 this issue is being continued on github. Please see: ​https://github.com/ckeditor/ckeditor-dev/issues/466