79
@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
import { AngularEditorConfig } from '@kolkov/angular-editor';
editorConfig: AngularEditorConfig = {
...,
uploadUrl: "http://localhost:8080/image/upload"
...
};
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;
}
- 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',
}).pipe(tap(console.log));
}
}
79