Adds upload and insert image feature Closes kolkov#5

kolkov · kolkov · commit 89adfd87603d · 2018-06-20T18:21:33.000+03:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kolkov/angular-editor",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "author": "Andrey Kolkov <a.kolkov@gmail.com>",
   "repository": "https://github.com/kolkov/angular-editor",
   "license": "MIT",
diff --git a/src/lib/angular-editor-toolbar.component.html b/src/lib/angular-editor-toolbar.component.html
@@ -113,6 +113,11 @@
             title="Unlink" [disabled]="htmlMode">
       <i class="fa fa-chain-broken"></i>
     </button>
+    <input
+      style="display: none"
+      type="file" (change)="onFileChanged($event)"
+      #fileInput>
+    <button type="button" class="angular-editor-button" (click)="fileInput.click()" title="Insert Image" [disabled]="htmlMode"><i class="fa fa-image"></i></button>
     <button type="button" title="Horizontal Line" class="angular-editor-button"
             (click)="triggerCommand('insertHorizontalRule')" [disabled]="htmlMode"><i class="fa fa-minus"></i></button>
   </div>
diff --git a/src/lib/angular-editor-toolbar.component.ts b/src/lib/angular-editor-toolbar.component.ts
@@ -1,5 +1,7 @@
 import {Component, EventEmitter, Output, Renderer2} from "@angular/core";
-import {AngularEditorService} from "./angular-editor.service";
+import {AngularEditorService, UploadResponse} from "./angular-editor.service";
+import {Observable} from "rxjs";
+import {HttpEvent, HttpResponse} from "@angular/common/http";
 
 @Component({
   selector: 'angular-editor-toolbar',
@@ -8,7 +10,6 @@ import {AngularEditorService} from "./angular-editor.service";
 })
 
 export class AngularEditorToolbarComponent {
-
   id = '';
   htmlMode = false;
 
@@ -146,4 +147,16 @@ export class AngularEditorToolbarComponent {
       this._renderer.removeClass(backgroundColorPickerWrapper, "disabled");
     }
   }
+
+  /**
+   * Upload image when file is selected
+   */
+  onFileChanged(event) {
+    const file = event.target.files[0];
+    this.editorService.uploadImage(file).subscribe(event => {
+      if (event instanceof HttpResponse) {
+        this.editorService.insertImage(event.body.imageUrl)
+      }
+    });
+  }
 }
diff --git a/src/lib/angular-editor.component.ts b/src/lib/angular-editor.component.ts
@@ -51,6 +51,7 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
 
   ngOnInit() {
     this.editorToolbar.id = this.id;
+    this.editorService.uploadUrl = this.config.uploadUrl;
     if (this.config.defaultParagraphSeparator) {
       document.execCommand("defaultParagraphSeparator", false, "p");
     }
diff --git a/src/lib/angular-editor.service.ts b/src/lib/angular-editor.service.ts
@@ -1,4 +1,10 @@
 import {Injectable} from '@angular/core';
+import {HttpClient, HttpEvent} from "@angular/common/http";
+import {Observable} from "rxjs";
+
+export interface UploadResponse {
+  imageUrl: string;
+}
 
 @Injectable({
   providedIn: 'root'
@@ -7,8 +13,9 @@ export class AngularEditorService {
 
   savedSelection: Range | null;
   selectedText: string;
+  uploadUrl: string;
 
-  constructor() {
+  constructor(private http: HttpClient) {
   }
 
   /**
@@ -136,4 +143,28 @@ export class AngularEditorService {
 
     return true;
   }
+
+  /**
+   * Upload file to uploadUrl
+   * @param file
+   */
+  uploadImage(file: File): Observable<HttpEvent<UploadResponse>>{
+
+      const uploadData: FormData = new FormData();
+
+      uploadData.append('file', file, file.name);
+
+      return this.http.post<UploadResponse>(this.uploadUrl, uploadData, {
+        reportProgress: true,
+        observe: 'events',
+      });
+  }
+
+  /**
+   * Insert image with Url
+   * @param imageUrl
+   */
+  insertImage(imageUrl: string){
+    document.execCommand('insertImage', false, imageUrl);
+  }
 }
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -12,6 +12,7 @@ export interface AngularEditorConfig {
   defaultParagraphSeparator?: string;
   defaultFontName?: string;
   defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' |string;
+  uploadUrl?: string;
 }
 
 export const angularEditorConfig: AngularEditorConfig = {
@@ -28,4 +29,5 @@ export const angularEditorConfig: AngularEditorConfig = {
   defaultParagraphSeparator: '',
   defaultFontName: '',
   defaultFontSize: '',
+  uploadUrl: 'v1/image',
 };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@kolkov/angular-editor",`
`3`		`- "version": "0.7.0",`
	`3`	`+ "version": "0.8.0",`
`4`	`4`	`"author": "Andrey Kolkov <[email protected]>",`
`5`	`5`	`"repository": "https://github.com/kolkov/angular-editor",`
`6`	`6`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft`
`51`	`51`
`52`	`52`	`ngOnInit() {`
`53`	`53`	`this.editorToolbar.id = this.id;`
	`54`	`+ this.editorService.uploadUrl = this.config.uploadUrl;`
`54`	`55`	`if (this.config.defaultParagraphSeparator) {`
`55`	`56`	`document.execCommand("defaultParagraphSeparator", false, "p");`
`56`	`57`	`}`