Show:
                            (function () {
                                'use strict';
                            
                                /**
                                 * The ButtonImage class inserts an image to the content.
                                 *
                                 * @class ButtonImage
                                 */
                                var ButtonImage = React.createClass({
                                    // Allows validating props being passed to the component.
                                    propTypes: {
                                        /**
                                         * The editor instance where the component is being used.
                                         *
                                         * @property {Object} editor
                                         */
                                        editor: React.PropTypes.object.isRequired,
                            
                                        /**
                                         * The label that should be used for accessibility purposes.
                                         *
                                         * @property {String} label
                                         */
                                        label: React.PropTypes.string,
                            
                                        /**
                                         * The tabIndex of the button in its toolbar current state. A value other than -1
                                         * means that the button has focus and is the active element.
                                         *
                                         * @property {Number} tabIndex
                                         */
                                        tabIndex: React.PropTypes.number
                                    },
                            
                                    // Lifecycle. Provides static properties to the widget.
                                    statics: {
                                        /**
                                         * The name which will be used as an alias of the button in the configuration.
                                         *
                                         * @static
                                         * @property {String} key
                                         * @default image
                                         */
                                        key: 'image'
                                    },
                            
                                    /**
                                     * Lifecycle. Renders the UI of the button.
                                     *
                                     * @method render
                                     * @return {Object} The content which should be rendered.
                                     */
                                    render: function() {
                                        var inputSyle = {display: 'none'};
                            
                                        return (
                                            <div>
                                                <button aria-label={AlloyEditor.Strings.image} className="ae-button" data-type="button-image" onClick={this.handleClick} tabIndex={this.props.tabIndex} title={AlloyEditor.Strings.image}>
                                                    <span className="ae-icon-image"></span>
                                                </button>
                            
                                                <input accept="image/*" onChange={this._onInputChange} ref="fileInput" style={inputSyle} type="file"/>
                                            </div>
                                        );
                                    },
                            
                                    /**
                                     * Simulates click on the input element. This will open browser's native file open dialog.
                                     *
                                     * @method handleClick
                                     * @param {SyntheticEvent} event The received click event on the button.
                                     */
                                    handleClick: function(event) {
                                        ReactDOM.findDOMNode(this.refs.fileInput).click();
                                    },
                            
                                    /**
                                     * On input change, reads the chosen file and creates an img element with src the image data as Data URI.
                                     * Then, fires an {{#crossLink "ButtonImage/imageAdd:event"}}{{/crossLink}} via CKEditor's
                                     * message system. The passed params will be:
                                     * - `el` - the created img element
                                     * - `file` - the original image file from the input element
                                     *
                                     * @protected
                                     * @method _onInputChange
                                     */
                                    _onInputChange: function() {
                                        var inputEl = ReactDOM.findDOMNode(this.refs.fileInput);
                            
                                        // On IE11 the function might be called with an empty array of
                                        // files. In such a case, no actions will be taken.
                                        if (!inputEl.files.length) {
                                            return;
                                        }
                            
                                        var reader = new FileReader();
                                        var file = inputEl.files[0];
                            
                                        reader.onload = function(event) {
                                            var editor = this.props.editor.get('nativeEditor');
                            
                                            var el = CKEDITOR.dom.element.createFromHtml('<img src="' + event.target.result + '">');
                            
                                            editor.insertElement(el);
                            
                                            editor.fire('actionPerformed', this);
                            
                                            var imageData = {
                                                el: el,
                                                file: file
                                            };
                            
                                            editor.fire('imageAdd', imageData);
                                        }.bind(this);
                            
                                        reader.readAsDataURL(file);
                            
                                        inputEl.value = '';
                                    }
                            
                                    /**
                                     * Fired when an image file is added as an element to the editor.
                                     *
                                     * @event imageAdd
                                     * @param {CKEDITOR.dom.element} el The created image with src as Data URI.
                                     */
                                });
                            
                                AlloyEditor.Buttons[ButtonImage.key] = AlloyEditor.ButtonImage = ButtonImage;
                            }());