SimpleUploads for CKEditor demo page

This sample shows the usage of the SimpleUpload plugin.
Depending on the browser that you're using you will have different options to upload files and images. This is due to the different capabilities of each browser.
The plugin requires the usage of a modern browser, so if you want these features for IE8 or IE9 you're out of luck. They are too outdated and lacks the required APIs.

You can upload a file or an image by clicking the addFile or addImage buttons and then selecting them (even several at the same time). It's just the simplest way for everyone to add files without having to deal with all the options in the default image or link dialogs.
Besides that, you can also just drag and drop any file or image from your desktop into the editor to upload them.

With Chrome, Firefox and IE11 or Edge, you can copy an image or part of it to your clipboard in a program like Photoshop, Paint.Net, etc... and then paste it into the contents with Ctrl+V.

With Firefox, you can select a file in your desktop, copy it to the clipboard (Ctrl+C) and then paste it into the editor with Ctrl+V.

The CKEditor dialogs that include "Upload" buttons (Link and Image for example, but also any other custom one) are automatically modified to provide the same upload features (check extension, file size...) and upload progress. Also you can drop the files into the dialog.

The full plugin is available only for licensed customers as explained in my blog.

Additional samples:
Several ways to validate uploads: basic rules, no check on client side, by size, allow only png images, and even by file name
Filter uploads by extensions
Adding extra fields as GET or POST parameters to the uploads
Different approaches to resize big images: allow, reject, resize on the server, resize on the browser

Classic editor

Inline editing samples

These inline editors use the default settings defined in config.js You can shrink the page and the columns will resize, and the images are responsive thanks to this little CSS:


/* responsive images for inline demo */
img, svg, .SimpleUploadsTmpWrapper  {
	height: auto;
	max-width: 100%;
So, in order to get responsive images while they are being uploaded, you just need to add "svg, .SimpleUploadsTmpWrapper" to your responsive rules

An inline editor

Click here and the toolbar will appear. SimpleUploads works nicely with Classic editors, inline editors, and even with the weird combinations of divareas and anything that you can create with CKEditor.

It also works with either the classic Image plugin or the "Enhanced Image" version


Another inline demo

Play around with these basic demos

Paste an image, drop files, use the upload buttons, ...

Open also your normal version of CKEditor and check the differences when you're trying to upload things

End of the samples in this page. Check the linked pages for more usages