diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.ts b/ui-ngx/src/app/shared/components/image/image-dialog.component.ts index 1a777d1bf7..b140c6bf32 100644 --- a/ui-ngx/src/app/shared/components/image/image-dialog.component.ts +++ b/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, { + 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}; } }); } diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts index ae022615a1..b61ef03eef 100644 --- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts +++ b/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 implements OnInit, ErrorStateMatcher { + DialogComponent 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, + public dialogRef: MatDialogRef, 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})); + }); } } } diff --git a/ui-ngx/src/app/shared/models/resource.models.ts b/ui-ngx/src/app/shared/models/resource.models.ts index 86b7c50553..a35e87864e 100644 --- a/ui-ngx/src/app/shared/models/resource.models.ts +++ b/ui-ngx/src/app/shared/models/resource.models.ts @@ -86,6 +86,10 @@ export interface ImageResourceInfo extends TbResourceInfo { publicLink?: string; } +export interface ImageResource extends ImageResourceInfo { + base64?: string; +} + export interface ImageExportData { mediaType: string; fileName: string;