@kolkov/angular-editor: upload image using custom service


For some reason unexpected, I cannot upload images using version 1.2.0 of the library @kolkov/angular-editor.

So many issues related to that and seem to be this cannot be fixed soon. So I decided to use other version and below is our solution to fix that



angular: v10.0
@kolkov/angular-editor: v1.1.5

Frontend - angular

import { AngularEditorConfig } from '@kolkov/angular-editor';

editorConfig: AngularEditorConfig = {
  uploadUrl: "http://localhost:8080/image/upload"

Backend - java

class UploadFile {
  public String imageUrl;

@PostMapping(path = "/files/upload/image/by/angular-editor",
        consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
        produces = MediaType.APPLICATION_JSON_VALUE)
public UploadFile uploadImageByAngularEditor(
      @RequestPart("file") MultipartFile file
    ) {
    // using your own service to save file
    // this is the image URL
    String imageUrl = "your image url"; 
    UploadFile response = new UploadFile();
    return response;

Backend - your system

  • Create Post API that handle input and return output adapt:
  • Input: MultipartFile that have file field in request
  • Ouput: return json that have imageUrl field like this { imageUrl: "" }


  • When set uploadUrl in fontend => every time you click upload image it will send a post request to uploadUrl
  • That request have MultipartFile in request, it expected to receive {"image Url": ""} in response
  • The below code is similar to post request:
import { HttpClient, HttpEvent } from '@angular/common/http';
import { UploadResponse } from '@kolkov/angular-editor';

export class FileService {
  constructor(private httpClient: HttpClient) {}

  uploadImageByAngularEditor(file: File): 
Observable<HttpEvent<UploadResponse>> {
    const url = `http://localhost:8080/upload/image`;
    const formData: FormData = new FormData();
    formData.append('file', file);
    return this.httpClient.post<UploadResponse>(url, formData, {
      observe: 'events',