Mixing SimpleUploads with other drag&drop scripts

In the SimpleUploads plugin, one of the features is to provide a way for the users to add files to their content by simply dragging them from their desktop. Of course, there might be more than one editor on the page and so the files are accepted only when they are dropped on an editor.

But there's a little problem: if the user drops the file outside the editor they may lose their current content because that image is loaded instead (yes, you can use autosave and also prompt them with onBeforeUnload), so in order to prevent data loss or the delay and surprise about having to go back and restore last saved draft, I implemented a little check that rejects any file that it's dropped outside the editor.

So does this fix all the problems?
Not of course!
If you want to provide support to drag&drop in other part of the page, I'm preventing that script to work but the solution is simple:

In the configuration of your CKEditor, add this extra setting:
simpleuploads_allowDropOutside = true;

That's all. If the that setting exists I won't touch anything outside the editor and you can keep working as usual.

How to generate unique file names with SimpleUploads

If for any reason you can't change the server back-end that saves your file uploads in CKEditor and you want to prevent the overwriting of existing files with new ones that have the same file names, you can add this code to your page to generate a unique filename for each upload (adjust it to your tastes)

CKEDITOR.on('instanceReady', function (e) {
 e.editor.on('simpleuploads.startUpload', function (ev) {
  var filename = ev.data.name;
  //var extension = filename.match(/\.\w+$/)[0];
  var newName = CKEDITOR.plugins.simpleuploads.getTimeStampId() + '_' + filename;
  ev.data.name = newName;
 });
});

Editing images for CKEditor

Besides allowing to upload images to their server, one of the main problems that users have with the images is the size of the pictures. Even for seasoned users, sometimes it's hard to calculate how to correctly crop a part of the image and then resize it to the final desired dimensions.

Using the features provided by the SimpleUploads plugin for CKEditor, you can now make this a very simple task so that they upload to the server the images exactly as desired, without any extra images laying around, and without worries that if the image is automatically cropped, the heads will be cut off or any strange thing like that.

The process is as simple as you can expect, once you have used it you'll never want to go back:

1. First add the image to the editor, usually the simplest way for the users is to just drop them from another window with the local file system (Explorer, Finder, etc...), but using the toolbar button to launch the file picker works as well.
2. Then a dialog launches showing the selected picture and the user is asked to select which preset sizes (that you configure in CKEditor) he/she wants to use.
3. Upon clicking on one of them, a selection appears over the image, and that selection can be resized and moved to focus on the interesting parts of the image.
4. Now the user can just click OK on the dialog and the image will be saved that way
5. Otherwise, if he clicks Crop then the options will ask which image quality should be used, and changing them modifies the preview as well as the size that it's shown that will be used for the new image.
6. Clicking OK will work like in step 4, the image is uploaded to the server and inserted into the content.

But there's even more:

If the image is already on the server, a new context menu option is added to show the same crop&resize dialog, so the user can opt to use existing images on the server and then adjust them when a thumbnail is required for example.

To get those features, check the demo for the image crop and resize plugin for CKEditor.

 

Including additional data with the file in SimpleUploads

A question that many people have asked for a long time is how to include additional info (for example the state of a new checkbox in a dialog or some Anti-CSRF tokens) when a file is uploaded in CKEditor with the "Quick upload" option available in some of the dialogs.
Most of the time no one answered, or the answer involved modifying the core files of CKEditor. In any case, there isn't a simple solution available.
WIth SimpleUploads 4 that's a very simple task, just set a listener for the "simpleuploads.startUpload" event that it's fired and you can the modify the target URL if you want to change the Query parameters, or include an "extraFields" object to the event data and the properties of such object will be sent as additional fields in the POST request.
Let's see this with an example, for me it's the best way to understand things.
First, suppose that you have modified the image dialog to include a custom checkbox, and that in your page you have defined an object that provides some tokens that should be used on each upload to verify that it hasn't been tampered. That's not part of the exercise so I'm not gonna explain that here, the problem is how to add that data to the uploads, not the system that you're using.
You just need to write a listener for the editor, and you can even create a listener for any editor in the page.

// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.startUpload' , function(ev) {

// write code here...

    });
});

the inner event will be fired on each upload that it's started, we just have to check if it's fired while we are on the image dialog to add the checkbox, and always add the additional POST fields.
Remember that this is just a basic sample, you can decide to send all the info as POST, or include more fields, check other functions, this is just a sample about how to modify the URL and query String and include extra POST fields:

  var data = ev.data;
  // the context property provides info about where the upload is being used
  // var context = data.context;

  // Check if there's a dialog open:
  var dialog = CKEDITOR.dialog.getCurrent();
  if (dialog)
  {
   var name = dialog.getName();
   if (name=="image")
   {
    // Get the value of our new checkbox and if it's checked add it as a parameter to the URL
    var value = dialog.getValueOf("Upload", "chkCustom");
    if (value)
     ev.data.url += "&checked=on";
   }
  }

  // add CSRF tokens
  var extraFields = {
   // These is sample code, the CKEDITOR.config.action, CKEDITOR.config.formID and Core objects
   // are items specific to a custom implementation of CKEditor.
   // Fill the extraFields object with whatever you might need.
   "Action" : CKEDITOR.config.action,
   "FormID" : CKEDITOR.config.formID
  };
  extraFields[ Core.Get("SessionName") ] = Core.Get("SessionID");

  ev.data.extraFields = extraFields;

All of the code is up and running in a new demo.
As you can see customizing the uploads in CKEditor now it's a very simple task and you have full control about what happens.

PS: Although I've said that those POST fields are fictional, in fact they are based on the setup used by OTRS 3.2.9. In order to integrate CKEditor they are using a custom build to modify the file uploads, but with this plugin such custom patches are no longer needed.

Finally, SimpleUploads 4 is here

After a long time working on this upgrade, I've reached the point where I think that it's better to release it and write all the documentation that I had in mind afterwards, so expect more updates about all the features in the following days.

Since quite a long time ago I felt that the name "ImagePaste" wasn't correct for a plugin that allows to also drop files and since version 3.0 offered two buttons to upload files or images with just two clicks and get them inserted into CKEditor.

So with along a new feature set, the main change (meaning the change that will cause more problems for existing users because instead of just replacing the files now you have to edit again your config file) is the rename of the old "imagepaste" to "simpleuploads"

That name tries to explain better what it does, it's not only about "images" and not only about "paste", it's a set of features to offer the users a way to "upload" files in a "simple" way.

The best way to check how it works is to test the demo.

Skipping the explanation about the existing features, the new ones are focused on the dialogs of CKEditor and improving the upload progress:

When you upload a file in the editor, now you get a progress indicator and the option to cancel the upload. The existing progress for images has been improved to also include the cancel option.

The plugin now integrates into the CKEditor dialogs, if it finds a "quickUpload" button it will be replaced with its own one to offer the same simple upload (click button, select a file and you're done instead of having to press the "upload to server"), as well as progress information, cancelation option and the full control on the upload (modify the upload URL, check file size, extension, automatica validation with a whitelist or blacklist...)

And besides modifying the QuickUpload button, the dialog itself now becomes a drop target, you can drop a file from your computer on those dialogs (even if there's only a browse server button is enough) and it will be uploaded and the url of the dialog filled with the new URL.

Another improvement in this version is the inclusion of optional parameters in the upload data, for example if you want to use some anti-CSRF token, modifying the QuickUpload system in CKEditor required some tricks, but now it's a piece of cake. Ditto if you want to add for example a checkbox to scale the image to a maximum, just before the upload begins there's an event where you can control many features.

I'll try to provide examples about how to customize CKEditor with this plugin so you can easily upload files and do whatever you want with them, so keep an eye on the blog because I'll try to write new posts explaining different ways to use the plugin. I've created now a main page here to provide a central point for all the information about SimpleUploads.

PS: currently I really dislike the comment system in Blogger because I don't get any notification when someone comments a post, so I might move to another platform if this bug persists. Meanwhile, have a little patience if I don't reply, it's usually better to send me a mail or direct message by + me.

Cross domain file uploads in CKEditor

In version 3.4 of the SimpleUploads plugin I've added support to upload files across domains based on the CORS spec.

If you don't use multiple domains (one server for the uploaded files and another for the editing page) then this change shouldn't affect you. Otherwise you can enable this feature by modifying your uploader to send just two headers in response to an OPTIONS request.
Some simple PHP code:

if (isset($_SERVER["HTTP_ORIGIN"])) {
 // You must verify that the origin domain is on your white-list
 header('Access-Control-Allow-Origin: https://admin.example.com');
 header('Access-Control-Allow-Credentials: true');
}
if ($_SERVER['REQUEST_METHOD']=='OPTIONS')
 exit(0);

• First: check if the browser has sent an Origin header. That means that it's a cross domain request. You can check that domain with the list of domains that you want to allow. The usual behavior is to send back a fixed origin header like
  

  header('Access-Control-Allow-Origin: https://admin.example.com');

• Second: Send an Access-Control-Allow-Credentials header specifying that the browser is allowed to make a request that will use the credentials of the user at this domain. This means that if the user is logged in, the browser will send the cookies required to allow you check his/her identity.
• Last: as the OPTIONS request doesn't require more data in the response you can stop any further processing here. After this first request the browser will upload the file and you must send back again the two Access-Control headers as shown in the sample code.

You must be careful if you want to allow this feature, after all it opens the possibility of another attack vector.
If you're hosting the files in the same physical server, you might be able to get the same functionality by modifying just the URL that it's returned after you upload a file and keeping all your code in the admin.example.com domain.

A basic upload script for CKEditor

A long time ago I published a basic example showing the skeleton of how an upload script for CKEditor should look like. Since the release of the imagepaste plugin I've received some requests to fill and explain all the details, and some people buy that plugin even before testing the free version and then they find that they don't know how to upload files.

So now I'm publishing that script with the missing part, a simple call to

move_uploaded_file($_FILES["upload"]["tmp_name"], $basePath . $name);

I've adjusted it a little so that the path to the upload folder and matching URL can be configured more easily, but it's still a very basic script. It doesn't perform any check on the uploaded files, you must take care of integrating it with your CMS (after all, that's something impossible for me to know how you're doing that part) and verify that the upload folder has the right permissions.

You can use it with CKEditor to enable the Upload tab in the Image and Link dialogs, and that way the user will be able to upload files (but not browse the existing ones). If you add the free version of the image paste plugin, then the user will be able to paste images from their clipboard into CKEditor, and the content will not be that huge mess of base64 encoded data, but a simple URL to your server with all the performance benefits that it means.

At this point, you can opt to buy the full version of the image paste plugin if you want to provide even more options for the users:

• Drag and drop from the computer for every modern browser
• Pasting images from the clipboard in Chrome (besides the basic pasting available in the free version for Firefox)
• Copy and paste a file from your computer in Firefox
• Two buttons to quickly upload a file or image for every browser. There's no way to make uploads simpler than this, other plugins still require the user to open a dialog, click browse, upload, etc... that's a huge mess and a big waste of time. Here you click and the file picker launches automatically, select the file that you want and then it's uploaded and inserted in a single step.

You can test all these features in the demo page for CKEditor 4 (the plugin also works with CKEditor 3)

Back to this upload script:

I've published it at GitHub so if other people wants to provide some suggestions for better compatibility or they take the time to improve it I will try to keep it updated, but I don't really want to spend too much time on it because if by a miracle it would be a success (in fact, I wouldn't like to see too many people using this because it's really basic) then attackers would love to exploit all the weakness that it has. Please, read the documentation, all the comments and try your best to secure it as much as you can. If you download it from GitHub, you can remove those extra .git* files that it has added automatically as well as the readme and the docs when you have read them.

You only need the upload.php file and to improve a little the security by obscurity you can opt to rename it anyway that you want, just put that same name and path in the configuration of your CKEditor.

The best option would be for you to take this script as a full example and then add your customizations, your own security options, make it unique so that a simple bot can't find and use it.

This is the link to download the current version from GitHub.

EasyUpload for CKEditor

Most of the people think that the most commonly used dialogs in CKEditor are too complex for the average user. They show lots of options, and all the info at the same time.

This has always lead to people asking how to change them or how to achieve some feature to simplify that process: I have an image here and I want it there, don't ask me lots of questions and force me to get a degree on HTML in order to understand what's the meaning of all those fields.

So a long time ago I created a simplified version for FCKeditor and now it's the time to show an updated version for CKEditor.

Bear in mind that right now the demo is still half done, I want to show how to use it in different ways so you can get the code to configure it the way that you like just by looking at the demo; and of course, while I polish that part I'll find some adjustments for the plugin.

So you can start testing it in the demo page for Easy Upload for CKEditor. If you have some comments about what you think it's missing you can add them here and I'll try to address them.

What's different from the usual dialogs?

You can check the demo by yourself, but some highlights are:

• If there's no image selected, the user is shown a simple page allowing him to choose the source of the image.
• The extension of the image is validated before uploading it to the server
• While uploading a file from his computer an animation is shown to signal the user that he must wait
• When the image is ready, a simplified dialog is shown

Edit 27th November 2013

I've removed the option to get this plugin and instead I suggest you to use the SimpleUploads and use the CKEditor API to remove elements from the default dialogs.

I'll try to provide a sample page to show how to do that, with the advantage that now instead of a copy of the link or image dialogs you will be using the built-in dialogs and it will be easier to do version upgrades whenever CKEditor changes.

 

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