Upload Images

By default, the Kendo UI Editor for Angular 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, i.e., 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>
            ...
            <kendo-toolbar-button text="Upload Image" (click)="open()">
            </kendo-toolbar-button>
        </kendo-toolbar>
    </kendo-editor>
    
    <my-dialog #upload [editor]="editor"></my-dialog>
  2. Configure the Dialog content and add an Upload component inside.

    <kendo-upload
        [saveUrl]="uploadSaveUrl"
        [removeUrl]="uploadRemoveUrl"
        (select)="onSelect($event)"
        (remove)="onRemove()"
        [multiple]="false">
            <kendo-upload-messages select="Select images">
            </kendo-upload-messages>
    </kendo-upload>
  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 = () => {
                        this.valueChange.emit({
                            src: img.src,
                            height: img.height,
                            width: img.width
                        });
                    }
                };
    
                reader.readAsDataURL(file.rawFile);
            }
        });
    }
  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());
    
        this.close()
    }

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?