New to Kendo UI for Angular? Start a free 30-day trial

Uploading Images in the Editor


ProductProgress® Kendo UI for Angular Editor


How can I upload images in the Kendo UI for Angular Editor?


By default, the Kendo UI for Angular Editor does not provide an option for uploading images. However, you can implement this functionality by utilizing the Kendo UI Upload component.

In this example the selected image files are handled on the client side, that is, no actual upload process is being initiated. You can still re-create the scenario by using a real backend service.

The implementation consists of the following steps:

  1. Create a custom toolbar with a button that opens a dialog.

    <kendo-editor #editor>
            <kendo-toolbar-button text="Upload Image" (click)="open()">
    <my-dialog #upload [editor]="editor"></my-dialog>
  2. Configure the Dialog content and add an Upload component inside.

            <kendo-upload-messages select="Select images">
  3. Read the content of the selected image by using a FileReader in the select event handler of the Upload.

    public onSelect(ev: SelectEvent): void {
        ev.files.forEach((file: FileInfo) => {
            if (file.rawFile) {
                const reader = new FileReader();
                reader.onloadend = () => {
                    let img = new Image();
                    img.src = <string>reader.result;
                    img.onload = () => {
                            src: img.src,
                            height: img.height,
                            width: img.width
  4. Execute the insertImage command using the URL and the dimensions of the image as its parameters by invoking the exec method of the Editor.

    public uploadImage() {
        this.editor.exec('insertImage', this.getData());

The following example demonstrates the full implementation of the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?