Uploading Images in the Editor

Environment

Description

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

Solution

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.

   Copy Code<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.

   Copy Code<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.

   Copy Codepublic 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.

   Copy Codepublic uploadImage() {
       this.editor.exec('insertImage', this.getData());
   
       this.close()
   }

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