2012/06/10

Drag and Drop uploads in CKEditor

Recently I was asked about a video that I added to YouTube some time ago: making drag&drop uploads work in CKEditor.
That video was a little test and I used a non-public modification of the image paste plugin that allows to automatically upload images that are pasted in Firefox. The video shows how to use drag and drop from the file system into a CKEditor instance and get that image or file uploaded to the server and inserted into the editor without any extra steps, if you know how to drag a file, adding it to CKEditor can't be any simpler.
The base of that code is XHR2 and FormData to send a File object to the server as well as the dataTransfer interface in the drop event and finally some API to find the correct drop location.
What does all those buzzwords mean?
Just that there are no browser plugins involved, if you use a browser that supports those new APIs then this feature will work: for Firefox, Chrome and Safari you can use the current stable versions, if you use IE then you need the IE 10 preview, and unfortunately Opera supports most of those features in Opera 12, but not the API to get the insertion point, so at the moment it's the only engine that it's left out.

Getting the plugin

The plugin is available in the version 4 page.

Demo

If you want to check how it works, you can use this demo page.

History

2.0 First release including drag&drop
2.1 June 17th, 2012. Added support for pasting in Chrome, correctly process files copied and pasted in Firefox  from the desktop if they aren't png. Support dropping multiple files.

version 3 is explained here

18 comments:

Mike McDade said...

I'm ready to buy a multi-site license of this module for a couple of projects I'm working on... like, ready to buy it immediately. However, the test code you provided isn't working for me. I've created a custom upload script in PHP (although frankly I don't think it's even necessary since I have CKFinder working with the quick uploader also working)... I've got the javascript loading, the plugin installed and loading (confirmed using the document inspector to check which resources are being loaded) and everything looks good, except when I do the drag-and-drop, it just redirects to the image location on my hard drive (in Chrome; in Safari, it includes the local URL into CKEditor).

If you can confirm what's going on here, I'm pretty much ready to make the purchase. I thought perhaps the problem was that I didn't have a license yet. The demo is working for me on your site... it just isn't working on mine. I was wondering if perhaps you had hid something in your minified CKEditor JavaScript code.

Palak Chokshi said...

Seems like a great plugin. Have you tried it with the new CKEditor 4 Beta?

Alfonso Martínez de Lizarrondo said...

Yes, I've adjusted it recently and it's working fine, although I'm not testing it fully until the final version is released (I'm slowly reviewing the plugins one by one).

And before I publish a demo with v4 I need to figure out how to create a custom build with the new system, then you'll be able to see that with the inline editing it's even more awesome.

Laurens Meurs said...

Hi, I love the idea of this plugin, but in FF on W7 when I copy a masked piece of an image from Photoshop to your demo editor and paste it, it works fine. But when I paste the same piece of image for the 2nd time, without moving the cursor, a big white "0 %" is still visible.

And sometimes the image does not appear, but the source show an extra body element like (had to swap lt/gt characters):

[body style="position: absolute; top: 39px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"]
[p]
[span style="color: rgb(255, 255, 255); font-family: Calibri, Arial, sans-serif; font-size: 50px; text-align: center;"]0 %[/span][/p]
[/body]

Alfonso Martínez de Lizarrondo said...

That 0% is an upload progress, although it isn't smooth at all, so you might see for a little bit longer than expected.(it's a pitty that it isn't smooth because when I created it I debugged using a 50ms timer to show the progress and it's really nice, but I can't use that same trick in the final page because it would be a lie to say that it's uploading when in fact there's an error and it isn't working)


I've tried to paste the same image several times and it worked fine for me. If I do it quickly without waiting for it to finish then there's some error and it seems that I'm overwriting the previous one or some other error, but doing it after the image has been uploaded worked fine, I was able to paste the same image as many times as I wanted.

I've read about that kind of problem with an extra body while using webkit, but not Firefox.
Which version of Firefox are you using?

Laurens Meurs said...

I was using FF v16.0.2 and updated to v17.0 where everything seems ok.

But in Chrome v23.0.1271.64 the same thing happened: copied a piece of a masked image, went to your demo editor, CTRL+A, DEL, CTRL+V, wait till image is fully uploaded, wait an extra few seconds, CTRL+V again, and when it's done view source: there still is an extra body tag in the editor.

Alfonso Martínez de Lizarrondo said...

Hi Lauren

I think that I've fixed the problem while pasting in Chrome, at least I haven't been able to reproduce any longer after some fixes.

I've updated the demo with a new version that also adds a little effect to highlight the editor and let the user know that he can drop the file there.

Please, can you check if you're still able to reproduce the errors that you had?

Thanks.

Laurens Meurs said...

Hi Alfonso,

I just tested it again in both the latest versions of Chrome and FF, everything seems to work like a charm. Great job!

Alfonso Martínez de Lizarrondo said...

Here's the demo with CKEditor 4:
http://www.martinezdelizarrondo.com/ckplugins/imagepaste.demo4/

Brett R said...

We just purchased your plugin which is really cool but we found a serious bug:

1. Copy an image from your desktop (right click and select copy)

2. Paste the image into the editor (it will upload with the percentage overlay)

3. Hit the "undo" button in the editor toolbar.

It injects the editor with a bunch of SVG junk code and sometimes crashes the browser.

Please fix!

Thanks

Alfonso Martínez de Lizarrondo said...

Wow, this wasn't easy due to the automatic undo images created by CKEditor itself that grabbed that temp code but I think that finally it's working in both 3.6 and 4.0

Let's see if it works correctly with all the combinations of browser and CKEditor setups and I'll send the update to everyone.

Leandro Flores said...

Hello, how are you? I'm interested in the plugin. I have a couple of questions:
1. I'm doing right click, copy an image file on windows explorer, and then trying to paste it on the editor in the demo page in chrome but nothing happens. It works if I drag and drop the file or if I copy some section of it in paint. Is this due to a security constraint in chrome? Can chrome be configured to work?
2. Must I get an OEM license for every copy of the commertial software I'm selling, or one OEM license is enough for all copies?
Thanks, great work!

Alfonso Martínez de Lizarrondo said...

Hellow Leandro

1. As far as I know, Chrome doesn't support copying a file into the editor that way. It works with Firefox, but I don't have any idea if or when Chrome might add a similar option.

2. As long as it's the same product then of course that you only need a single OEM license (and that the product isn't just trying to resell my plugin ;-)

Nenad said...

Hi.

Do you have a free version of the plugin, which works with CKEditor 4?

We are interested in purchase, but we must verify that it works before we buy it.

Thanks

Alfonso Martínez de Lizarrondo said...

It would be hard to provide a free version that shows the features and then try to charge for it.

You can try the demo for CKEditor 4 http://www.martinezdelizarrondo.com/ckplugins/imagepaste.demo4/ the only part that you need is to be able to add custom plugins to your CKEditor and have the file uploads already configured in the default image and link dialogs (it makes no sense to try to add this plugin if your users aren't already able to add files in the usual way)

Nenad said...

Everything is configured properly.

Hopefully the plugin will work.

Frédéric LESAGE said...

I'm trying to implement the plugin on fresh ckeditor (exactly in sample ckeditor file) to test.

My test don't work with CKEditor 4.1.1. But works with your demo version (4.2 DEV).

What is different ?

Alfonso Martínez de Lizarrondo said...

what is the problem?
do you get any error?