# ImageEditor Events

This article describes the available events in the Telerik [ImageEditor for Blazor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview):

* [`OnError`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onerror)
* [`OnExecute`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexecute)
* [`OnExport`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexport)
* [`OnOpen`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onopen)

## OnError

The ImageEditor `OnError` event fires when the component fails to load, edit, render, or export the image. The event handler receives an argument of type [`ImageEditorErrorEventArgs`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.imageeditor.imageeditorerroreventargs).

The component displays an [error state](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#error-state) when a file fails to load, so handling `OnError` is not required.

Also see the [runnable example below](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#example).

> caption Using the ImageEditor OnError event

```RAZOR.skip-repl
<TelerikImageEditor OnError="@OnImageEditorError" />

@code {
    private void OnImageEditorError(ImageEditorError args)
    {
        Console.WriteLine(args.Message);
    }
}
```

## OnExecute

The ImageEditor `OnExecute` event fires after the component applies, undoes, or redoes an edit. The edit can come from a [built-in tool](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools) or from the [`ExecuteAsync` method](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands). The event is not cancellable.

Zoom, pan, and live previews do not fire the event. For example, a slider that the user is still dragging does not fire `OnExecute`, and the component raises the event once when the drag completes.

The event handler receives an argument of type [`ImageEditorExecuteEventArgs`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.imageeditor.imageeditorexecuteeventargs) that exposes the following properties:

* `Command` (`ImageEditorCommand`)—the executed command.
* `Reason` (`ImageEditorExecuteReason`)—`Execute`, `Undo`, or `Redo`. On undo and redo, the event describes the edit that the component reverted or reapplied.
* `Args` (`ImageEditorCommandArgs`)—the command arguments. Cast them to the class that the [command reference](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands#command-reference) lists for the command. The value is `null` for commands without arguments.

Also see the [runnable example below](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#example).

> caption Using the ImageEditor OnExecute event

```RAZOR.skip-repl
<TelerikImageEditor OnExecute="@OnImageEditorExecute" />

@code {
    private void OnImageEditorExecute(ImageEditorExecuteEventArgs args)
    {
        if (args.Command == ImageEditorCommand.ApplyFilter && args.Args is ImageEditorFilterArgs filterArgs)
        {
            Console.WriteLine($"{args.Reason}: {filterArgs.Filter}");
        }
    }
}
```

## OnExport

The ImageEditor `OnExport` event fires before the edited image downloads. The event is cancellable and in this case the browser does not download the file.

The event handler receives an argument of type [`ImageEditorExportEventArgs`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.imageeditor.imageeditorexporteventargs) that exposes the following properties:

* `FileName` (`string`)—the name of the downloaded file. Set the property to rename the file.
* `Format` (`string`)—the MIME type of the export.
* `IsCancelled` (`bool`)—set the property to `true` to prevent the download.

Also see the [runnable example below](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#example).

> caption Using the ImageEditor OnExport event

```RAZOR.skip-repl
<TelerikImageEditor OnExport="@OnImageEditorExport" />

@code {
    private void OnImageEditorExport(ImageEditorExportEventArgs args)
    {
        args.FileName = $"edited-{DateTime.Now:yyyy-MM-dd}";

        //args.IsCancelled = true;
    }
}
```

## OnOpen

The ImageEditor `OnOpen` event fires before the component opens an image from a selected file, from the `Data` parameter, or from the `ImageUrl` parameter. The event is cancellable and in this case the currently open image, if any, stays in the editor.

`OnOpen` always fires before any `OnExecute` event for the same image.

The event handler receives an argument of type [`ImageEditorOpenEventArgs`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.imageeditor.imageeditoropeneventargs) that exposes the following properties:

* `FileName` (`string`)—the name of the file, for example, `"photo.png"`. The value is `"image"` when the image comes from `Data`, and the last segment of the URL when the image comes from `ImageUrl`.
* `Extension` (`string`)—the lowercase file extension, including the dot, for example, `".png"`. The value is `null` when the file name has no extension.
* `FileSize` (`long?`)—the file size in bytes. The value is `null` when the image loads from `ImageUrl`.
* `Width` (`int`)—the width of the image in pixels.
* `Height` (`int`)—the height of the image in pixels.
* `IsCancelled` (`bool`)—set the property to `true` to prevent the component from opening the image.

Also see the [runnable example below](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#example).

> caption Using the ImageEditor OnOpen event

```RAZOR.skip-repl
<TelerikImageEditor OnOpen="@OnImageEditorOpen" />

@code {
    private void OnImageEditorOpen(ImageEditorOpenEventArgs args)
    {
        if (args.Width > 8000 || args.Height > 8000)
        {
            args.IsCancelled = true;
        }
    }
}
```

## Example

The following example handles all ImageEditor events. Open an image from your device to see the event log.

> caption Using the ImageEditor events

<demo metaUrl="client/imageeditor/events/" height="800"></demo>

## Next Steps

* [Explore the ImageEditor tools](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools)
* [Edit images programmatically](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands)

## See Also

* [Live Demo: ImageEditor](https://demos.telerik.com/blazor-ui/imageeditor/overview)
* [ImageEditor API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikimageeditor)