Show: Inherited Protected Private Deprecated

# ButtonImage Class

Defined in: `src/ui/react/src/components/buttons/button-image.jsx:4`

The ButtonImage class inserts an image to the content.

## Index

### Methods

- _onInputChange
- handleClick
- render

### Properties

- editor
- key static
- label
- tabIndex

### Events

- beforeImageAdd
- imageAdd

## Methods

### `_onInputChange`

() protected

Defined in `src/ui/react/src/components/buttons/button-image.jsx:77`

On input change, reads the chosen file and fires an event `beforeImageAdd` with the image which will be added to the content. The image file will be passed in the `imageFiles` property. If any of the listeners returns `false` or cancels the event, the image won't be added to the content. Otherwise, an event `imageAdd` will be fired with the inserted element into the editable area. The passed params will be:

- `el` - the created img element
- `file` - the original image file from the input element

### `handleClick`

(

- `event`

)

Defined in `src/ui/react/src/components/buttons/button-image.jsx:67`

Simulates click on the input element. This will open browser's native file open dialog.

#### Parameters:

- `event` SyntheticEvent

  The received click event on the button.

### `render`

() Object

Defined in `src/ui/react/src/components/buttons/button-image.jsx:47`

Lifecycle. Renders the UI of the button.

#### Returns:

Object:

The content which should be rendered.

## Properties

### `editor`

Object

Defined in `src/ui/react/src/components/buttons/button-image.jsx:12`

The editor instance where the component is being used.

### `key`

String static

Defined in `src/ui/react/src/components/buttons/button-image.jsx:37`

The name which will be used as an alias of the button in the configuration.

Default: image

### `label`

String

Defined in `src/ui/react/src/components/buttons/button-image.jsx:19`

The label that should be used for accessibility purposes.

### `tabIndex`

Number

Defined in `src/ui/react/src/components/buttons/button-image.jsx:26`

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.

## Events

### `beforeImageAdd`

Defined in `src/ui/react/src/components/buttons/button-image.jsx:130`

Fired before adding images to the editor.

#### Event Payload:

- `imageFiles` Array

  Array of image files

### `imageAdd`

Defined in `src/ui/react/src/components/buttons/button-image.jsx:137`

Fired when an image is being added to the editor successfully.

#### Event Payload:

- `el` CKEDITOR.dom.element

  The created image with src as Data URI

- `file` File

  The image file