Paste image file from desktop?

[Steve James]

For some reason I can drag an image file from my desktop into the editor and drop it, and it uploads just fine.

However, if I copy the same file from my desktop to the clipboard, click into the editor, and attempt to paste it, I get the security warning and I am unable to paste the file such that it is uploaded.

It seems like both approaches should work as they are essentially just two ways to accomplish the same thing. Am I missing something?

[Piotrek Koszuliński]

The problem is with browsers (and perhaps OSes) - they do not allow some kind of operations and are not fully integrated with each other. What CKEditor does is only take files that a browser exposes in the clipboard. Whatever else happens, when e.g. an icon is pasted (happens on MacOS) or some security error appears - this is a browser/OS I'm afraid.

I'll ask a colleague to check it. However, I don't think we've ever seen a security warning. On what browser and OS does it happen and on what domain you run CKEditor?

[Jakub Ś]

Just one extra question

However, if I copy the same file from my desktop to the clipboard, click into the editor, and attempt to paste it,

How are you trying to paste the image? Are you using Ctrl+V or perhaps CKEditor Paste toolbar button or perhaps CKEditor Context-Menu (right-click, select paste)? In last two cases paste dialog should be displayed but perhaps for some reason the security warning is shown?

[Piotr Jasiun]

In such problems details are very important: what browser do you use? What is you operation system? What is the type of the file you are trying to paste?

We made a deep research to find out how browsers behave when you paste or drop a file (or other content) and what we learned is that these behavior is very different for pasting and dropping and very different between browsers. The only browser which support pasting files is Firefox and there is nothing CKEditor can do with it.

So if you are using Firefox and pasting files of supported type (jpg, png or gif) it should work and this is a valid bug, otherwise it is the browsers behavior that dropping works but pasting not.

And about the security warning: if you are pasting content in the IE using the editors toolbar button is the browser behavior and you can see it also in the previous versions of the CKEditor when you paste any type of content for the first time.

[Steve James]

Rt Click Paste

[Steve James]

Allow Clipboard Access

[Steve James]

Security Warning

[Steve James]

I use Win 7, and IE11, FireFox, Chrome, Win/Safari. My users basically use a wide mix, so I try to test w/ a wide mix also. (Although I do not have a Mac.)

File is small 18kb jpg file on my desktop. Produced by win snipping tool. (I *can* paste screen captures copied to clipboard by snipping tool.)

Editor instance is in a jQuery UI modal dialog.

Tests:

1. Right Click copy of file from desktop, left click focus into editor instance. Rt Click... I see the CKE Paste context menu item. I select it, get allow access to clipboard pop-up, I allow, I get the security warning. I paste into security warning pop-up, nothing happens. No upload.

2. Right Click copy of file from desktop, left click focus into editor instance. Click Paste Icon from toolbar... I select it, get allow access to clipboard pop-up, I allow, I get the security warning. I paste into security warning pop-up, nothing happens. No upload.

3. Right Click copy of file from desktop, left click focus into editor instance. Keyboard Ctrl-V... nothing happens.

4. Drag and drop of same file from desktop into editor instance. No problems... file uploads as expected.

5. Interesting discovery... Do Test #1 above... If then use snipping tool to capture something from screen, and switch focus back to editor and try to paste again, it uploads as expected. The snipping tool operation seems to fix the security issue temporarily. If this was truly just a browser/OS limitation, I would not expect to see anything make the paste work like this.

So something is triggering the security pop-up. Since it works in some cases but not others, I think this warrants further investigation.

[Steve James]

If I test w/ Firefox 35... I can paste a file copied from the desktop into the editor via Ctrl+V, but none of the approaches above work.

I recognize that there may be browser specific dependencies and limitations (I have to deal with those also), but I am hoping that we can get this sorted out. Lack of reliable approach for uploading images pasted into the editor has been a major headache for me for some time, and I have been watching your progress on this closely. I kept telling my users they needed to upload the images in the past, and they ignored me and pasted anyway ;-D, which caused some issues when the images were large.

As a result, I am a very committed user for this particular functionality... I need it to work well in a wide variety of situations.

[Steve James]

I think I know what is maybe going on now by examining the raw clipboard data from different scenarios. (relevant screen captures attached) When copying a file from the desktop, a file pointer is created in the clipboard of data format CF_HDROP. (MS data format reference: ​https://msdn.microsoft.com/en-us/library/windows/desktop/bb776902(v=vs.85).aspx#CF_HDROP) The contents of the file are not put in the clipboard... a file name is, which makes sense, because this is typically used to copy/paste files in a file manager context. Therefore, if I then paste from the clipboard into CKEditor thinking I am going to paste the contents of an image file into the editor (if the file is an image file), then I am presuming I will be mistaken, because I am guessing that the code is only looking for image formats on the clipboard. It appears that Firefox does handle this differently though, and maybe converts the file pointer into image data.

It would be nice to be able to copy an image file from the desktop and paste its contents into ckeditor... I think that would be functionality that users would appreciate (like mine). You could check the data format for the CF_HDROP tag, validate the filename for image file types. If desired, you can also verify the contents as images via ​http://www.htmlgoodies.com/html5/tutorials/determine-an-images-type-using-the-javascript-filereader.html#fbid=FvKVGAQV6if

[Steve James]

View of Raw Clipboard Data for image file copied from desktop

[Steve James]

View of Raw Clipboard data for file contents copied from in Paint

[Jakub Ś]

I have tested CKEditor 4.5.1 upload feature and:

1. It works on latest Firefox - all scenarios.
2. Only Drag&Drop works for IE11 and Blink but ... it seems that browsers don't support other scenarios natively. When trying to execute any other scenario, nothing happened, no events were triggered. The same occurred when I was using native contenteditable element.

at the moment this is a "Won't Fix" issue. Perhaps we should close it as such?

[Piotrek Koszuliński]

@SteveTheTechie: What native clipboard contains is not the same what HTML's clipboard contains (for security reasons mostly). If the browser's clipboard does not contain files then we cannot read them. Unfortunately, we must wait for browser vendors to integrate better their products with OSes.

Closing as "can't fix".