Save image

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html

@@ -16,18 +16,19 @@
       [maintainAspectRatio]="true"
       format="jpeg"
       [aspectRatio]="aspectRatio"
-      [autoCrop]="false"
+      [autoCrop]="true"
       (imageCropped)="imageCropped($event)"
       (imageLoaded)="imageLoaded($event)"
       (cropperReady)="cropperReady()"
       (loadImageFailed)="loadImageFailed()"
+      [imageURL]="imageUrl"
   ></image-cropper>
     </div>
      <input #fileInput type="file" (change)="fileChangeEvent($event)" style="display:none" accept="image/*"/>
      <span  class="btn btn-primary" (click)="fileInput.click()" i18n>Select image</span>
   </div>
   <div class="modal-footer">
-    <button type="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded">Apply</button> 
+    <button type="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded" (click)="save()">Apply</button> 
     <button type="button" autofocus class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonCancel">Cancel</button>
   </div> 
 </ng-template>

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit,ViewChild,ElementRef } from '@angular/core';
+import { Component, OnInit,ViewChild,ElementRef,EventEmitter, Output } from '@angular/core';
+import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
 import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper';
+import {ImageService } from '../../services/image.service';
 
 @Component({
   selector: 'fm-edit-image-modal',
@@ -9,23 +11,28 @@ import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper';
 })
 export class EditImageModalComponent implements OnInit {
 
+  @Output() changed = new EventEmitter();
   @ViewChild('upload_modal') modal:ElementRef;
 
-  constructor(private modalService: NgbModal) { }
+  constructor(private modalService: NgbModal,public imageService:ImageService) { }
+
+  isImageLoaded:boolean = false;
+  aspectRatio:number = 4/3;
+  imageChangedEvent: any = '';
+  croppedImage: string = '';
+  endpointUrl:string = null;
+  imageUrl:string = null;
 
   ngOnInit(): void {
   }
 
   open(endpoint:string,aspectRatio:number) {
+    this.endpointUrl = endpoint;
+    this.imageUrl = endpoint;
     this.aspectRatio= aspectRatio;
     this.modalService.open(this.modal,{ size: 'lg' });
   }
 
-  isImageLoaded:boolean = false;
-  aspectRatio:number = 4/3;
-  imageChangedEvent: any = '';
-  croppedImage: any = '';
-
   fileChangeEvent(event: any): void {
       this.imageChangedEvent = event;
   }
@@ -41,4 +48,15 @@ export class EditImageModalComponent implements OnInit {
   loadImageFailed() {
       // show message
   }
+
+  save() {
+    if(this.croppedImage) {
+      
+      var body = this.croppedImage.substr(23);
+      this.imageService.putImage(this.endpointUrl,this.imageService.b64toBlob(body,"image/jpeg")).subscribe(() => {
+        this.changed.emit({});
+      });    
+      (this.modal as any).close('Save click');
+    }
+  }
 }