Merge pull request #10215 from vvlladd28/improvement/upload-image/double-request

Optimized updated image in Image Gallery

ui-ngx/src/app/shared/components/image/image-dialog.component.ts

@@ -14,8 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
-import { ErrorStateMatcher } from '@angular/material/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -23,7 +22,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { ImageService } from '@core/http/image.service';
-import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
+import { ImageResource, ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
 import {
   UploadImageDialogComponent,
   UploadImageDialogData
@@ -143,7 +142,7 @@ export class ImageDialogComponent extends
       $event.stopPropagation();
     }
     this.dialog.open<UploadImageDialogComponent, UploadImageDialogData,
-      ImageResourceInfo>(UploadImageDialogComponent, {
+      ImageResource>(UploadImageDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
@@ -153,9 +152,15 @@ export class ImageDialogComponent extends
       if (result) {
         this.imageChanged = true;
         this.image = result;
-        this.imagePreviewData = {
-          url: this.image.public ? `${this.image.publicLink}?ts=${new Date().getTime()}` : this.image.link
-        };
+        let url;
+        if (result.base64) {
+          url = result.base64;
+        } else if (this.image.public) {
+          url = `${this.image.publicLink}?ts=${new Date().getTime()}`;
+        } else {
+          url = this.image.link;
+        }
+        this.imagePreviewData = {url};
       }
     });
   }

ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts

@@ -30,8 +30,10 @@ import {
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { ImageService } from '@core/http/image.service';
-import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
+import { ImageResource, ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { forkJoin } from 'rxjs';
+import { blobToBase64 } from '@core/utils';
 
 export interface UploadImageDialogData {
   image?: ImageResourceInfo;
@@ -44,7 +46,7 @@ export interface UploadImageDialogData {
   styleUrls: []
 })
 export class UploadImageDialogComponent extends
-  DialogComponent<UploadImageDialogComponent, ImageResourceInfo> implements OnInit, ErrorStateMatcher {
+  DialogComponent<UploadImageDialogComponent, ImageResource> implements OnInit, ErrorStateMatcher {
 
   uploadImageFormGroup: UntypedFormGroup;
 
@@ -59,7 +61,7 @@ export class UploadImageDialogComponent extends
               private imageService: ImageService,
               @Inject(MAT_DIALOG_DATA) public data: UploadImageDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<UploadImageDialogComponent, ImageResourceInfo>,
+              public dialogRef: MatDialogRef<UploadImageDialogComponent, ImageResource>,
               public fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
   }
@@ -98,18 +100,20 @@ export class UploadImageDialogComponent extends
     const file: File = this.uploadImageFormGroup.get('file').value;
     if (this.uploadImage) {
       const title: string = this.uploadImageFormGroup.get('title').value;
-      this.imageService.uploadImage(file, title).subscribe(
-        (res) => {
-          this.dialogRef.close(res);
-        }
-      );
+      forkJoin([
+        this.imageService.uploadImage(file, title),
+        blobToBase64(file)
+      ]).subscribe(([imageInfo, base64]) => {
+        this.dialogRef.close(Object.assign(imageInfo, {base64}));
+      });
     } else {
       const image = this.data.image;
-      this.imageService.updateImage(imageResourceType(image), image.resourceKey, file).subscribe(
-        (res) => {
-          this.dialogRef.close(res);
-        }
-      );
+      forkJoin([
+        this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
+        blobToBase64(file)
+      ]).subscribe(([imageInfo, base64]) => {
+        this.dialogRef.close(Object.assign(imageInfo, {base64}));
+      });
     }
   }
 }

ui-ngx/src/app/shared/models/resource.models.ts

@@ -86,6 +86,10 @@ export interface ImageResourceInfo extends TbResourceInfo<ImageDescriptor> {
   publicLink?: string;
 }
 
+export interface ImageResource extends ImageResourceInfo {
+  base64?: string;
+}
+
 export interface ImageExportData {
   mediaType: string;
   fileName: string;