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

Problem
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
Solution
Version
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();
    response.setImageUrl(imageUrl);
    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: "" }
  • Explain
  • 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',
        }).pipe(tap(console.log));
      }
    }

    96

    This website collects cookies to deliver better user experience

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