Merge pull request kolkov#236 from sandergo90/feature/file-upload

Add possibility to provide an upload function
laijuthomas · Oct 24, 2020 · 5de5ead · 5de5ead
2 parents 0b35198 + 06cdf75
commit 5de5ead
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,7 @@ editorConfig: AngularEditorConfig = {
       },
     ],
     uploadUrl: 'v1/image',
+    upload: (file: File) => { ... }
     uploadWithCredentials: false,
     sanitize: true,
     toolbarPosition: 'top',
@@ -174,6 +175,7 @@ For `ngModel` to work, you must import `FormsModule` from `@angular/forms`, or f
 | defaultFontName  | `string` | `-` | no | Set default font such as `Comic Sans MS` |
 | defaultFontSize  | `string` | `-` | no | Set default font size such as `1` - `7` |
 | uploadUrl  | `string` | `-` | no | Set image upload endpoint `https://api.exapple.com/v1/image/upload` |
+| upload  | `function` | `-` | no | Set image upload function |
 | uploadWithCredentials | `bolean` | `false` | no | Set passing or not credentials in the image upload call |
 | fonts  | `Font[]` | `-` | no | Set array of available fonts  `[{name, class},...]` |
 | customClasses  | `CustomClass[]` | `-` | no | Set array of available fonts  `[{name, class, tag},...]` |

diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -1,9 +1,10 @@
 import {Component, ElementRef, EventEmitter, Inject, Input, Output, Renderer2, ViewChild} from '@angular/core';
-import {AngularEditorService} from './angular-editor.service';
-import {HttpResponse} from '@angular/common/http';
+import {AngularEditorService, UploadResponse} from './angular-editor.service';
+import {HttpResponse, HttpEvent} from '@angular/common/http';
 import {DOCUMENT} from '@angular/common';
 import {CustomClass} from './config';
 import {SelectOption} from './ae-select/ae-select.component';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'angular-editor-toolbar',
@@ -116,6 +117,7 @@ export class AngularEditorToolbarComponent {
 
   @Input() id: string;
   @Input() uploadUrl: string;
+  @Input() upload: (file: File) => Observable<HttpEvent<UploadResponse>>;
   @Input() showToolbar: boolean;
   @Input() fonts: SelectOption[] = [{label: '', value: ''}];
 
@@ -310,18 +312,15 @@ export class AngularEditorToolbarComponent {
   }
 
   /**
-   * Upload image when file is selected
+   * Upload image when file is selected.
    */
   onFileChanged(event) {
     const file = event.target.files[0];
     if (file.type.includes('image/')) {
-        if (this.uploadUrl) {
-            this.editorService.uploadImage(file).subscribe(e => {
-              if (e instanceof HttpResponse) {
-                this.editorService.insertImage(e.body.imageUrl);
-                event.srcElement.value = null;
-              }
-            });
+        if (this.upload) {
+          this.upload(file).subscribe(() => this.watchUploadImage);
+        } else if (this.uploadUrl) {
+            this.editorService.uploadImage(file).subscribe(() => this.watchUploadImage);
         } else {
           const reader = new FileReader();
           reader.onload = (e: ProgressEvent) => {
@@ -333,6 +332,12 @@ export class AngularEditorToolbarComponent {
       }
   }
 
+  watchUploadImage(response: HttpResponse<{imageUrl: string}>, event) {
+    const { imageUrl } = response.body;
+    this.editorService.insertImage(imageUrl);
+    event.srcElement.value = null;
+  }
+
   /**
    * Set custom class
    */

diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html
@@ -1,44 +1,61 @@
-<div class="angular-editor" #angularEditor [style.width]="config.width"
-     [style.minWidth]="config.minWidth">
-  <angular-editor-toolbar *ngIf="config.toolbarPosition === 'top'" #editorToolbar
-                          [id]="id"
-                          [uploadUrl]="config.uploadUrl"
-                          [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
-                          [fonts]="getFonts()"
-                          [customClasses]="config.customClasses"
-                          [defaultFontName]="config.defaultFontName"
-                          [defaultFontSize]="config.defaultFontSize"
-                          [hiddenButtons]="config.toolbarHiddenButtons"
-                          (execute)="executeCommand($event)"></angular-editor-toolbar>
+<div
+     class="angular-editor"
+     #angularEditor
+     [style.width]="config.width"
+     [style.minWidth]="config.minWidth"
+>
+     <angular-editor-toolbar
+          *ngIf="config.toolbarPosition === 'top'"
+          #editorToolbar
+          [id]="id"
+          [uploadUrl]="config.uploadUrl"
+          [upload]="config.upload"
+          [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
+          [fonts]="getFonts()"
+          [customClasses]="config.customClasses"
+          [defaultFontName]="config.defaultFontName"
+          [defaultFontSize]="config.defaultFontSize"
+          [hiddenButtons]="config.toolbarHiddenButtons"
+          (execute)="executeCommand($event)"
+     ></angular-editor-toolbar>
 
-  <div class="angular-editor-wrapper" #editorWrapper>
-    <div #editor class="angular-editor-textarea"
-         [attr.contenteditable]="config.editable"
-         [attr.tabindex]="disabled ? -1 : tabIndex"
-         [attr.translate]="config.translate"
-         [attr.spellcheck]="config.spellcheck"
-         [style.height]="config.height"
-         [style.minHeight]="config.minHeight"
-         [style.maxHeight]="config.maxHeight"
-         [style.outline]="config.outline === false ? 'none': undefined"
-         (input)="onContentChange($event.target)"
-         (focus)="onTextAreaFocus($event)"
-         (blur)="onTextAreaBlur($event)"
-         (click)="exec()"
-         (keyup)="exec()"
-         (mouseout)="onTextAreaMouseOut($event)"
-    >
-    </div>
-    <span class="angular-editor-placeholder">{{ placeholder || config['placeholder'] }}</span>
-  </div>
-  <angular-editor-toolbar *ngIf="config.toolbarPosition === 'bottom'" #editorToolbar
-                          [id]="id"
-                          [uploadUrl]="config.uploadUrl"
-                          [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
-                          [fonts]="getFonts()"
-                          [customClasses]="config.customClasses"
-                          [defaultFontName]="config.defaultFontName"
-                          [defaultFontSize]="config.defaultFontSize"
-                          [hiddenButtons]="config.toolbarHiddenButtons"
-                          (execute)="executeCommand($event)"></angular-editor-toolbar>
+     <div
+          class="angular-editor-wrapper"
+          #editorWrapper
+     >
+          <div
+               #editor
+               class="angular-editor-textarea"
+               [attr.contenteditable]="config.editable"
+               [attr.tabindex]="disabled ? -1 : tabIndex"
+               [attr.translate]="config.translate"
+               [attr.spellcheck]="config.spellcheck"
+               [style.height]="config.height"
+               [style.minHeight]="config.minHeight"
+               [style.maxHeight]="config.maxHeight"
+               [style.outline]="config.outline === false ? 'none': undefined"
+               (input)="onContentChange($event.target)"
+               (focus)="onTextAreaFocus($event)"
+               (blur)="onTextAreaBlur($event)"
+               (click)="exec()"
+               (keyup)="exec()"
+               (mouseout)="onTextAreaMouseOut($event)"
+          >
+          </div>
+          <span class="angular-editor-placeholder">{{ placeholder || config['placeholder'] }}</span>
+     </div>
+     <angular-editor-toolbar
+          *ngIf="config.toolbarPosition === 'bottom'"
+          #editorToolbar
+          [id]="id"
+          [uploadUrl]="config.uploadUrl"
+          [upload]="config.upload"
+          [showToolbar]="config.showToolbar !== undefined ? config.showToolbar : true"
+          [fonts]="getFonts()"
+          [customClasses]="config.customClasses"
+          [defaultFontName]="config.defaultFontName"
+          [defaultFontSize]="config.defaultFontSize"
+          [hiddenButtons]="config.toolbarHiddenButtons"
+          (execute)="executeCommand($event)"
+     ></angular-editor-toolbar>
 </div>
diff --git a/projects/angular-editor/src/lib/config.ts b/projects/angular-editor/src/lib/config.ts
@@ -1,3 +1,7 @@
+import { UploadResponse } from './angular-editor.service';
+import { HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
 export interface CustomClass {
   name: string;
   class: string;
@@ -25,6 +29,7 @@ export interface AngularEditorConfig {
   defaultFontName?: string;
   defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | string;
   uploadUrl?: string;
+  upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
   uploadWithCredentials?: boolean;
   fonts?: Font[];
   customClasses?: CustomClass[];