Simple Uploads Plugin for CKEditor

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 28-September-2011. First public version.
2.0: 10-June-2012. Included support for Drag&drop. This version is not open source
2.1: 17-June-2012. Added pasting from clipboard in Chrome. Allow dropping multiple files. Clean up non-valid Safari images (webkit-fake-url)
2.2: 17-July-2012. Avoid problems in Macs pasting from MS Office into Chrome
2.3: 22-September-2012. Show a greyscale animation while uploading a picture (except if it's pasted in Firefox)
Compatiblity with CKEditor 4 beta
Disabled the check that prevented drops in Opera: if the browser doesn't support an API to detect the correct caret position we'll let it handle that part.
2.4: 25-November-2012: Polish the upload notification: show full color image as soon as it has been uploaded, show an overlay with the numeric percentage.
Use upload progress also for pasting in Firefox
Avoid extra body after pasting in Chrome
Drag over effect to highlight the editor.
2.5: 20-February-2013. Integrate correctly with the Undo system.
2.6: 22-February-2013. More protections in case the user tries to mess with the editor while uploading a file.
2.7: 23-February-2013. Protection in case the user switches to Source mode while uploading
Unification of code for pasting in Firefox and rest of cases
Configuration options for the drag-over shadows.
Integration with CKEditor 4.1 data filtering
3.0: 26-April-2013. Two buttons for the toolbar to add files or images for those users that don't like to drag things :-).
Fix problems in CKEditor 4 if setData is called on the editor
Use correct URL for upload if it lacks query string parameters.
3.1: 4-May-2013 Adjusted the ACF for IE8 and IE9
The events have been renamed to "simpleuploads.startUpload" and "simpleuploads.endUpload" and now the startUpload can be used to cancel an upload
3.2: 1-June-2013 Adjusted the regexp for detection of uploads to take care of systems that lack the status message.
Added a console warning if the upload url hasn't been set in the configuration of CKEditor.
Add a space to separate links when dropping several files (not images).
Fixed bug in IE10 on drop of multiple files.
3.3.1: 23rd-July-2013 Changed the "100%" text after file has been sent to "Processing..." (it can be modified in the lang file)
Readjusted the detection of file upload name to take into account apostrophes again
Toolbar buttons didn't work correctly in IE8 since 3.1
Fixed Strict mode problems
Better detection of failed uploads
3.3.2: 2nd-August-2013 Compatibility with IE11: adjusted for keep on allowing upload by drag&drop and added pasting from clipboard
Add dimensions of the uploaded images as attributes to the created elements.
3.3.3: 22-September-2013 Improve detection of failed uploads to correctly show the error message
Allow the "simpleuploads.startUpload" event to modify the name of the uploaded file (except for uploads in old IEs). If you want full control the best option is to modify your upload script at the server.
3.3.4: 5th-October-2013 New event "simpleuploads.finishedUpload" that it's fired after the final element has been inserted into the page (so you can add for example your custom class or modify any other attribute)
3.4 Support for Cross domain requests. Now you can upload your files for example to http://media.example.com and edit the page from http://admin.example.com.
4.0: 18-November-2013
Renamed from imagepaste to simpleuploads
According to your previous customizations, the upgrade can be very easy or require a little bit of attention.
Added support to specify extra fields during uploads (for example to support anti-CSRF tokens)
Replace the QuickUpload buttons in all the CKEditor dialogs with one-click buttons
Allow to drop files on the dialogs that have a quick upload of file browser options
Those uploads provide an upload progress bar, cancel button and allow the same features as the rest of uploads (verify the file for size, extension, etc.. before starting the upload, modify the upload url, add extra fields...)
Handle pasted images for Chrome and IE11 in the Paste dialog (remember that it's easier if you just Ctrl+V on the main document)
Added cancel button for images dropped on the editor
Added progress and cancel options for files dropped on the editor
4.0.1: 20-November-2013
Fixed compatibility with IE 11
Corrected cancel button for file uploads in IE
Improved upload progress for files
4.0.2: 30-November-2013
Support pasting text and images from MS Word in IE 11
Avoid a problem with Chrome if the editor is empty and you drop a file below the highlighted body
Support Firefox in the Paste dialog
Improved compatibility with CKEditor 4.3 and the new Widgets
Improved compatibility with IE 11 (several adjustments)
4.1.0: 7-December-2013
Enhance the toolbar buttons to preserve better the existing content:
- If an image is selected, picking a new one will preserve its attributes
- If the selection is in a link, picking a file will change only the href of the link
- If there's some text selected, picking a file will convert it to a link
Apply similar checks on the drop target:
- If an image is dropped over an existing one, replace the source
- If a file is dropped over a link, replace the href
During a drop, if the Shift key is pressed, create a link (a) instead of an image (img)
Added new simpleuploads_hideImageProgress option to use always plain text for the uploads instead of the image preview
Handle the third optional parameter in the upload callback for dialogs if it is a function (compatibility with the default uploads)
Adjusted the htmlFilter that strips the temporary elements to deal with changes in CKEditor 4.3
Don't break the table dialog if the plugin "dialogadvtab" is not included
Corrected compatibility in dialogs with IE8
Added German and Polish translations
4.1.1: 8-January-2014
Added validation of images for the toolbar button and image dialogs
Adjusted regexp to parse results to handle better OTRS
4.1.2:
Allow to set "simpleuploads_imageExtensions" to false or an empty string so no file is inserted as image
Correctly send extraFields when pasting an image in Firefox and IE11
4.1.3:
Modified the function in getTimeStampId to toISOString and the regexp to protect against third party libraries
Handle pasting of images if forcePasteAsPlainText is enabled
4.1.4: 16-January-2014
Readjusted for changes in the image2 widget
4.2.0: 2nd-march-2014
New event simpleuploads.localImageReady that allows better checks on the selected images (not available for IE8 & IE9).
Based on this event, two new options are available, simpleuploads_convertBmp (removed in 4.5) and simpleuploads_maximumDimensions
More features (local resizing) will be available in a future release.
This event requires asynchronous processing, so maybe there are situations that I didn't test properly, please, cautious with this update for a few days.
-Fixed bug with the paste dialog due to recent changes in CKEditor
4.2.1: 9-March-2014
Fix memory leak by reference to the editor even after it has been destroyed
Added new translations
4.2.2: 13-March-2014
If CKEditor was launched in a jQueryUI modal dialog, the file picker didn't work.
4.2.3: 27-March-2014
Detect the response sent after an upload even if it incorrectly has quotes around the funcNumber paramenter.
4.2.4: 4-April-2014
Prevent firing the "blur" event on the editor when clicking on the upload buttons with Chrome.
Correct detection of the toolbar buttons in IE8.
Avoid error when integrating with a dialog that lacks an onShow handler.
4.2.5: 16-May-2014
Allow to embed the files as base64 data: URLs if the filebrowserUploadUrl is set to "base64"
4.2.6: 19-May-2014
Protection to avoid errors with the paste dialog in a smartgwt environment
Disable upload buttons if base64 encoding has been selected for old IEs
4.3.0: 12-June-2014
Disable the sendAsBinary method in Firefox to avoid the compatibility warning
New optional parameter that can be used to set custom http headers in the XHR
Avoid temporary visible space while pasting an image with IE11 or Firefox
Adjusted the regexp to handle new KCFinder
Included the xhr and original data object in the simpleuploads.endUpload event
4.3.1: 22-June-2014
Correct the API that handles modified images if a dialog is open
4.3.2: 26-June-2014
Try to parse correctly the url of the uploaded file if it contains escaped chars like \u00E6
4.3.3: 27-June-2014
Fix the previous two bugs when using the Upload button in the Image dialog
4.3.4: 20-July-2014
Pasting an image in Chrome placed it at the start of the content depending on the page.
4.3.5: 2-September-2014
Fixed regression of 4.3.4 for CKEditor 3.6
4.3.6: 27-September-2014
The toolbar buttons used an incorrect syntax in the requiredContent definition for the ACF.
New event 'serverResponse' to handle custom responses from the server
4.3.7: 1-October-2014
Images dropped in IE11 didn't have the correct location if used with the Image Crop plugin
4.3.8: 21-November-2014
Handle correctly dropped files when using the CKEDITOR.inline method with textareas
4.3.9: 2-December-2014
New configuration option "simpleuploads_inputname" to specify the name of the input sent to the server with the file data
Added protection against overwritting the native URL object by the CodeCogs plugin
Improvements to the usage of the "base64" upload option (Remember that we advice you to avoid this option unless you're really sure that this is the way to go, it's mostly unsupported and untested due to the lack of valid use cases so far)
4.3.11: 11-December-2014
(skipping 4.3.10 as the plugin.js in 4.3.9 already used that version)
Fix upload for IE8 that were broken in 4.3.9
4.3.12: 22-March-2015
If an Image2 widget is selected, replace the image when using the toolbar button.
4.3.13: 23-June-2015
Allow dropping multiple files on dialogs
Corrected the method fired on a dialog when a file is uploaded from "onFileSelect" to "filebrowse.onSelect"
4.3.14: 27-June-2015
If filebrowserImageUploadUrl is set but filebrowserUploadUrl is empty, dont' crash trying to upload a non-image file
Optimized the pngs for the toolbar buttons
4.3.15: 13-September-2015
Unified formatting by Eslint
Removed compatibility code for CKEditor 3.6, if you need it, please send me a mail
Adjusted compatibility for CKEditor 4.5.2 to drop files on the dialogs
4.3.16: 13-September-2015
Use "accept" attribute to show only images in the "add image" prompt (doesn't work for MS Edge, bug report)
4.3.17: 8-November-2015
If the 'notificationaggregator' plugin is loaded (introduced in CKEditor 4.5) use it to show the messages instead of window.alert except if there's a dialog shown
4.3.18: 22-November-2015
If the added image is replacing an existing one, prevent Firefox and IE from caching the previous dimensions
4.3.19: 7-January-2016
The simpleuploads_allowDropOutside option was preventing dragging inside Inline editors
4.3.20: 27-January-2016
If multiple files are uploaded from a dialog (ex: the ImagesFromWord plugin), show a progress bar for each one
4.3.21: 4-February-2016
Bugfix to show better multiple progress bars on a dialog
4.4.0: 8-February-2016
Removed support for IE8
Added some missing translations for error messages
4.4.1: 29-February-2016
Bugfix for broken usage of error message.
4.4.2: 04-July-2016
Protect the displayed filename to avoid self-XSS attacks.
Don't replace new lines with in messages if the 'notification' is not available
Use the CSRF token introduced in CKEditor 4.5.6 to upload files to latest CKFinder
4.4.3: 18-November-2016
Avoid leaving the placeholder and not inserting the image if the upload is just too fast.
Avoid problems with E10s in Firefox betas
Use lowercase CSS class names to avoid bug with Chrome
4.4.4: 20-December-2016
Allow to create a customized XHR object in simpleuploads.startUpload and pass it in the data object.
4.5.0: 18-February-2017
Get ready for allowing pasting of images in the upcoming Safari
Adjust the regexp that removes useless webkit-fake-url images
Added bunch of file error handling to take care of problems with Safari
Http error status is checked only if there isn't a callback that handled the server response
Adjusted linting mostly for XO
Removed simpleuploads_convertBmp configuration option. Now it's handled automatically, as well as tiff files (for Safari)
4.5.1: 28/07/2017
Pass the data object in the simpleuploads.finishedUpload event
Enable pasting images in Chrome on MacOs from the desktop (Finder)
Prevent duplicate images with latest CKEditor and Firefox
4.5.2: 23/08/2017
Enabled pasting of images when a dialog is open (ex: the ImagesFromWord plugin)
4.5.3: 24/08/2017
Prevent pasting an image if there's HTML in the clipboard
4.5.4: 21/10/2017
Handle adding files while the selection is fully an inline element (like |some text)
4.5.5: 14/01/2019
Protect reading the files from the clipboard for Chrome 49 in some situations. Patch by Jonathan Ehman.
4.5.6: 04/05/2019
Move the CKEDITOR.dialog.prototype.showThrobber definition to the onLoad event of the plugin so it's executed only once if there are multiple editors.

Disclaimers

File and Image icons by the Tango Desktop Project

Simple Uploads Plugin for CKEditor

Author:

Version history:

See also

Disclaimers