Save image

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');
+    }
+  }
 }