diff --git a/API/FamilyTreeAPI/Controllers/FileUploadController.cs b/API/FamilyTreeAPI/Controllers/FileUploadController.cs index a36298a..e52182d 100644 --- a/API/FamilyTreeAPI/Controllers/FileUploadController.cs +++ b/API/FamilyTreeAPI/Controllers/FileUploadController.cs @@ -22,7 +22,7 @@ public class FileUploadController : ControllerBase _config = config; } - [HttpPost("UploadFile")] + [HttpPost("[action]")] public async Task UploadFile(IFormFile file) { List> output = new (); @@ -36,7 +36,7 @@ public class FileUploadController : ControllerBase // Define the upload directory // var uploadsFolder = Path.Combine(_hostingEnvironment.WebRootPath, "uploads"); - string importFolder = _config.GetValue("ImportFolder"); + string importFolder = _config.GetValue("AppSettings:ImportFolder"); var uploadsFolder = Path.Combine(_hostingEnvironment.ContentRootPath, importFolder); if (!Directory.Exists(uploadsFolder)) { @@ -72,4 +72,11 @@ public class FileUploadController : ControllerBase return StatusCode(500, $"Internal server error: {ex.Message}"); } } + + [HttpPost("[action]")] + public async Task DownloadFile(DownloadFileCriteria criteria) + { + var rev = await _importPersonRepository.DownloadFile(criteria); + return Ok(rev); + } } diff --git a/API/FamilyTreeAPI/Dockerfile b/API/FamilyTreeAPI/Dockerfile index 3b80c5b..7e024a9 100644 --- a/API/FamilyTreeAPI/Dockerfile +++ b/API/FamilyTreeAPI/Dockerfile @@ -1,12 +1,11 @@ # See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging. # This stage is used when running from VS in fast mode (Default for Debug configuration) -#FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base +#FROM mcr.microsoft.com/dotnet/aspnet:9::.0 AS base ARG BUILD_CONFIGURATION=Release -FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build +FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build WORKDIR /src COPY ["FamilyTreeAPI/FamilyTreeAPI.csproj", "FamilyTreeAPI/"] -COPY ["CommonAD/CommonAD.csproj", "CommonAD/"] RUN dotnet restore "./FamilyTreeAPI/FamilyTreeAPI.csproj" COPY . . WORKDIR "/src/FamilyTreeAPI" @@ -18,9 +17,9 @@ FROM build AS publish RUN dotnet publish "./FamilyTreeAPI.csproj" -c Release -o /app/publish /p:UseAppHost=false # This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration) -FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base +FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base WORKDIR /app -ENV ASPNETCORE_HTTP_PORTS=80 -EXPOSE 80 +ENV ASPNETCORE_HTTP_PORTS=8080 +EXPOSE 8080 COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "FamilyTreeAPI.dll"] \ No newline at end of file diff --git a/API/FamilyTreeAPI/Entities/FileContent.cs b/API/FamilyTreeAPI/Entities/FileContent.cs index 5c98573..29e959a 100644 --- a/API/FamilyTreeAPI/Entities/FileContent.cs +++ b/API/FamilyTreeAPI/Entities/FileContent.cs @@ -10,6 +10,10 @@ public class FileContent public byte[] Content { get; set; } public string FileName { get; set; } } +public class DownloadFileCriteria +{ + public string FileName { get; set; } +} public class UploadCriteria { public string FileName { get; set; } diff --git a/API/FamilyTreeAPI/Helper/family_doc.txt b/API/FamilyTreeAPI/Helper/family_doc.txt new file mode 100644 index 0000000..a78ab5a --- /dev/null +++ b/API/FamilyTreeAPI/Helper/family_doc.txt @@ -0,0 +1,35 @@ +The family Tree + +Man and Woman + +top level + +1) TAM (M) has partner Jenny (F) + +had child CAO (M) +had Child Emmy (F) +has Child Loan (F) + + +2) CAO (M) has partner Lin (F) + +has child Joe (M) +has child TOM (M) + + +3) Joe has partner Sophia (F) + +has child Olivia (F) +has child Mai (F) + + +4) Henry has partner Loan (F) + +has child Enya (F) +has child Thanh (M) +has child Chuong (M) + +5) Henry has partner Brisa (F) +has child Fern (F) +has child Tim (M) + diff --git a/API/FamilyTreeAPI/Properties/launchSettings.json b/API/FamilyTreeAPI/Properties/launchSettings.json index 6118837..4389506 100644 --- a/API/FamilyTreeAPI/Properties/launchSettings.json +++ b/API/FamilyTreeAPI/Properties/launchSettings.json @@ -8,7 +8,7 @@ "ASPNETCORE_ENVIRONMENT": "Development" }, "dotnetRunMessages": true, - "applicationUrl": "http://localhost:5015", + "applicationUrl": "http://localhost:5016", "applicationUrl1": "http://192.168.8.188:5015" }, "IIS Express": { diff --git a/API/FamilyTreeAPI/Repository/ImportPersonRepository.cs b/API/FamilyTreeAPI/Repository/ImportPersonRepository.cs index 97590bd..13edbbe 100644 --- a/API/FamilyTreeAPI/Repository/ImportPersonRepository.cs +++ b/API/FamilyTreeAPI/Repository/ImportPersonRepository.cs @@ -37,7 +37,67 @@ public class ImportPersonRepository _config = config; _httpContext = httpContext; } + public async Task GetImageAsBase64String(string imagePath) + { + try + { + // Read the image file into a byte array + //byte[] imageBytes = File.ReadAllBytes(imagePath); + byte[] imageBytes = await File.ReadAllBytesAsync(imagePath); + // Convert the byte array to a Base64 string + string base64String = Convert.ToBase64String(imageBytes); + return base64String; + } + catch (FileNotFoundException) + { + Console.WriteLine($"Error: The file at '{imagePath}' was not found."); + return null; + } + catch (Exception ex) + { + Console.WriteLine($"An error occurred: {ex.Message}"); + return null; + } + } + + public async Task> DownloadFile(DownloadFileCriteria criteria) + { + int statusCode = -1; + string result = ""; + string error = ""; + try + { + + + string imagePath = _config.GetValue("AppSettings:ImageFolder"); + string imageUrl = System.IO.Path.Combine(imagePath, criteria.FileName); + if (System.IO.File.Exists(imageUrl)) + { + result = await this.GetImageAsBase64String(imageUrl); + statusCode = 1; + } + else + { + error = "error filename " + criteria.FileName + " can not find"; + statusCode = -1; + } + } + catch (Exception ex) + { + statusCode = -1; + error = ex.Message; + } + + return new ResultModel + { + Data = result, + StatusCode = statusCode, + Message = error + }; + + + } public async Task>> ImportPerson(MemoryStream fileStream, string sheetName) { Dictionary relationDic = new(); diff --git a/API/FamilyTreeAPI/appsettings.json b/API/FamilyTreeAPI/appsettings.json index 0bc3c3a..313267d 100644 --- a/API/FamilyTreeAPI/appsettings.json +++ b/API/FamilyTreeAPI/appsettings.json @@ -17,9 +17,9 @@ } }, "AllowedHosts": "*", - "Kestrel": { + "Kestrel_not_use": { "Endpoints": { - "Http": { + "Http": { "Url": "http://*:5015" } } diff --git a/API/docker-compose.yml b/API/docker-compose.yml index 0504ff2..eb40998 100644 --- a/API/docker-compose.yml +++ b/API/docker-compose.yml @@ -29,7 +29,7 @@ services: PGADMIN_DEFAULT_EMAIL: postgres@domain.com PGADMIN_DEFAULT_PASSWORD: Positive~1 ports: - - "5050:80" + - "5050:5050" networks: - dev familytreeui: @@ -41,7 +41,7 @@ services: build: context: UI dockerfile: Dockerfile - container_name: workui + container_name: familytreeui volumes: - ./:/app networks: @@ -54,8 +54,7 @@ services: environment: - "Logging:Microsoft.AspNetCore.DataProtection:None" - "AppSettings:SQLConnectionString=host=postgresdb;database=FamilyTreeDB;username=postgres;password=Positive~1" - volumes: - - myapikey:/home/app/.aspnet/DataProtection-Keys + ports: - "8080:8080" build: diff --git a/UI/Dockerfile b/UI/Dockerfile new file mode 100644 index 0000000..c25259d --- /dev/null +++ b/UI/Dockerfile @@ -0,0 +1,32 @@ +FROM node:24.0.0 AS build +RUN mkdir -p /app +WORKDIR /app + +COPY ["./*.json", "./"] + +RUN npm install -g @angular/cli + +COPY . . +# Run command in Virtual directory +RUN npm cache clean --force + +RUN npm install + +#RUN ng build --configuration=production +RUN ng build -c=production + +FROM nginx:latest +#### copy nginx conf +COPY ./nginx.conf /etc/nginx/conf.d/default.conf + +#COPY --from=build app/dist/Familytree/browser /usr/share/nginx/html +#### copy artifact build from the 'build environment' old is not in browser folder +COPY --from=build /app/dist/Familytree/browser /usr/share/nginx/html + +#CMD ["nginx", "-g", "daemon off;"] + +EXPOSE 80 + +#docker build -t my_angular_app:latest . +#docker run --name carval -d -p 4200:80 varlidate_ui +#npm error code ENOENT \ No newline at end of file diff --git a/UI/nginx.conf b/UI/nginx.conf new file mode 100644 index 0000000..a38c2dd --- /dev/null +++ b/UI/nginx.conf @@ -0,0 +1,20 @@ +server { + listen 80; + sendfile on; + default_type application/octet-stream; + + gzip on; + gzip_http_version 1.1; + gzip_disable "MSIE [1-6]\."; + gzip_min_length 256; + gzip_vary on; + gzip_proxied expired no-cache no-store private auth; + gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; + gzip_comp_level 9; + + root /usr/share/nginx/html; + + location / { + try_files $uri $uri/ /index.html =404; + } +} \ No newline at end of file diff --git a/UI/public/config/appsetting.json b/UI/public/config/appsetting.json index 8189732..345ba58 100644 --- a/UI/public/config/appsetting.json +++ b/UI/public/config/appsetting.json @@ -1,5 +1,6 @@ { "baseUrl1": "http://192.168.8.188:5015", - "baseUrl": "http://localhost:5015", + "baseUrl": "http://localhost:5016", + "baseUrl_docker": "http://localhost:8080", "attachment": "http://localhost/document/family" } \ No newline at end of file diff --git a/UI/src/app/app.routes.ts b/UI/src/app/app.routes.ts index 3c635ec..952d9ab 100644 --- a/UI/src/app/app.routes.ts +++ b/UI/src/app/app.routes.ts @@ -4,12 +4,14 @@ import { StaffComponent, StaffEditComponent } from './staff'; import { AuthGuard } from './route-guard'; import { FamilyTree, FamilyList} from './person'; import { ImportCom } from './import.com/import.com'; +import { ImageDisplayComponent } from './pickperson/image.display'; export const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, // { path: 'approval', component: ApprovalComponent,canActivate: [AuthGuard], data: { roleAllowed: '1,2,3' }},}, { path: 'login', component: Login}, { path: 'staff', component: StaffComponent}, { path: 'person', component: FamilyList}, + { path: 'imagedisplay/:id', component: ImageDisplayComponent}, { path: 'import', component: ImportCom}, { path: 'familytree', component: FamilyTree}, { path: 'staff/:id', component: StaffEditComponent}, diff --git a/UI/src/app/import.com/import.com.html b/UI/src/app/import.com/import.com.html index 88539cf..36e7377 100644 --- a/UI/src/app/import.com/import.com.html +++ b/UI/src/app/import.com/import.com.html @@ -2,7 +2,7 @@ diff --git a/UI/src/app/import.com/import.com.ts b/UI/src/app/import.com/import.com.ts index 07f1bca..3f16541 100644 --- a/UI/src/app/import.com/import.com.ts +++ b/UI/src/app/import.com/import.com.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { FileUploadEvent, FileUploadModule } from 'primeng/fileupload'; import { MessageService } from 'primeng/api'; import { FileUpload } from 'primeng/fileupload'; import { ToastModule } from 'primeng/toast'; +import { AppSettingService } from '../shares'; /* interface UploadEvent { originalEvent: Event; @@ -16,9 +17,17 @@ interface UploadEvent { templateUrl: './import.com.html', styleUrl: './import.com.css' }) -export class ImportCom { +export class ImportCom implements OnInit { uploadedFiles: any[] = []; + baseUrl = ""; + private appSetting = inject(AppSettingService); constructor(private messageService: MessageService) {} +ngOnInit(): void + { + const cbaseUrl = this.appSetting.appSetting.baseUrl; + //http://localhost:5015/api/FileUpload/UploadFile" + this.baseUrl = cbaseUrl + "/api/FileUpload/UploadFile"; + } onUpload(event:FileUploadEvent) { for(let file of event.files) { this.uploadedFiles.push(file); diff --git a/UI/src/app/models/configureUrl.ts b/UI/src/app/models/configureUrl.ts index 198ae08..bf08d34 100644 --- a/UI/src/app/models/configureUrl.ts +++ b/UI/src/app/models/configureUrl.ts @@ -12,5 +12,6 @@ export enum ConfigureUrl logoutUrl ="api/Users/Logout", adminUserUrl = "api/Staff", lookupUrl = "api/Lookup", + FileUploadUrl = "api/FileUpload", } \ No newline at end of file diff --git a/UI/src/app/person/family.orga.ts b/UI/src/app/person/family.orga.ts index 9cdd606..1cef064 100644 --- a/UI/src/app/person/family.orga.ts +++ b/UI/src/app/person/family.orga.ts @@ -5,9 +5,7 @@ import { OrganizationChartModule } from 'primeng/organizationchart'; import { take } from 'rxjs/operators'; import { Subscription } from 'rxjs'; -import { Router } from '@angular/router'; import { PersonService } from './person.service'; -import { AuthenticationService } from '../user-services'; import { TableModule } from 'primeng/table'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; @@ -41,15 +39,13 @@ export class FamilyOrga implements OnInit, OnDestroy{ familyList:Person[] = []; msg ="[Person organise component]"; private messageService = inject(MessageService); + public ref = inject(DynamicDialogRef); + public config = inject(DynamicDialogConfig); /* private store: Store */ - constructor( - public dialogService: DialogService, - private personService: PersonService, - - public ref: DynamicDialogRef, public config: DynamicDialogConfig, - ) {} + private personService = inject(PersonService); + public dialogService = inject(DialogService); ngOnInit(): void { diff --git a/UI/src/app/person/familylist.ts b/UI/src/app/person/familylist.ts index 007309d..d8d942e 100644 --- a/UI/src/app/person/familylist.ts +++ b/UI/src/app/person/familylist.ts @@ -38,25 +38,25 @@ export class FamilyList implements OnInit, OnDestroy{ //private cd = inject(ChangeDetectorRef); items: MenuItem[] | undefined; selectedPerson!: Person; - firstname = ''; - email = ''; - lastname = ''; - _id = -10; - selectId = -1; - loading = false; - familyList = signal([]); - msg ="[Person component]"; - @ViewChild(Table) dt2!: Table; - @ViewChild('rowmenu') popMenu?: Menu; - private messageService = inject(MessageService); - public dialogService= inject( DialogService); + firstname = ''; + email = ''; + lastname = ''; + _id = -10; + selectId = -1; + loading = false; + familyList = signal([]); + msg ="[Person component]"; + @ViewChild(Table) dt2!: Table; + @ViewChild('rowmenu') popMenu?: Menu; + private messageService = inject(MessageService); + public dialogService= inject( DialogService); private personService= inject( PersonService); private confirmationService = inject(ConfirmationService); - private cd = inject(ChangeDetectorRef); + private cdr = inject(ChangeDetectorRef); private authenticationService= inject( AuthenticationService); private router= inject( Router); - constructor() {} - getSearchCiteria(): StaffSearch { + + getSearchCiteria(): StaffSearch { let criteria:StaffSearch = { email: this.email, firstName: this.firstname, @@ -182,7 +182,7 @@ export class FamilyList implements OnInit, OnDestroy{ console.log("the person from load", this.familyList()); this.loading = false; - this.cd.detectChanges(); + this.cdr.detectChanges(); }, error: e => { const message = e || e.message; @@ -250,6 +250,7 @@ export class FamilyList implements OnInit, OnDestroy{ const nlist = this.familyList().filter(d => d.id !== id); this.familyList.set(nlist); + this.cdr.detectChanges(); }, error: e => console.error(e) }); @@ -311,19 +312,21 @@ export class FamilyList implements OnInit, OnDestroy{ } updateList(item: Person) :void { - const idx = this.familyList().findIndex( x => x.id == item.id); + const list = this.familyList(); + const idx = list.findIndex( x => x.id === item.id); if (item.fatherId && item.fatherId > 0) item.fatherName = this.getName(item.fatherId); if (item.motherId && item.motherId > 0) item.motherName = this.getName(item.motherId); if (idx < 0) { - const olist = [... this.familyList(), item]; + const olist = [... list, item]; this.familyList.set(olist); } else { - const oitem = this.familyList()[idx]; + + const oitem = list[idx]; oitem.firstName = item.firstName; oitem.lastName = item.lastName; oitem.address = item.address; @@ -335,7 +338,9 @@ export class FamilyList implements OnInit, OnDestroy{ oitem.motherId = item.motherId; oitem.fatherName = item.fatherName; oitem.motherName = item.motherName; + this.familyList.set(list); } + this.cdr.markForCheck(); } diff --git a/UI/src/app/person/person.edit.html b/UI/src/app/person/person.edit.html index 9c4f173..f3d9c78 100644 --- a/UI/src/app/person/person.edit.html +++ b/UI/src/app/person/person.edit.html @@ -53,11 +53,15 @@
+
@if (adminuserForm.value.image != "" && adminuserForm.value.image != null) {
- View Attachment - + + @@ -65,7 +69,7 @@ } @else { -
+
@@ -75,11 +79,12 @@
} +
- +
diff --git a/UI/src/app/person/person.edit.ts b/UI/src/app/person/person.edit.ts index 7d3c794..c041b7f 100644 --- a/UI/src/app/person/person.edit.ts +++ b/UI/src/app/person/person.edit.ts @@ -17,7 +17,8 @@ import moment from 'moment'; import { HttpEvent } from '@angular/common/http'; import { TableModule } from 'primeng/table'; import { Pickperson } from '../pickperson/pickperson'; - +import { ImageDisplayComponent } from '../pickperson/image.display'; +import { TooltipModule } from 'primeng/tooltip'; export interface FileUploadEvent { originalEvent: HttpEvent; @@ -30,7 +31,8 @@ export interface FileUploadHandlerEvent { @Component({ templateUrl: 'person.edit.html', selector: 'person-edit', -imports:[ButtonModule,TableModule,ReactiveFormsModule,SelectModule,CheckboxModule, InputTextModule,DatePickerModule], +imports:[ButtonModule,TableModule,ReactiveFormsModule,TooltipModule, + SelectModule,CheckboxModule, InputTextModule,DatePickerModule], styleUrls: ['person.edit.css'], providers: [DialogService] @@ -233,8 +235,7 @@ populateSex(): void { name:"Male", status:'M' }; -this.sexList.push(item); - + this.sexList.push(item); } ngOnInit():void { @@ -275,10 +276,33 @@ ngOnInit():void { // this for disable submit button get isFieldsChange() { const chan = this.isChange || !this.adminuserForm.valid; // this disable so need true valid = true not - //console.log(this.msg + 'is fields change', chan); + console.log(this.msg + 'is fields change', chan); return chan; - } - +} + +doViewImage(imageName:string): void { + const ref = this.dialogService.open(ImageDisplayComponent, { + data: { + imageName, + }, + + header: 'View Image', + draggable: true, + width: '70%', + modal:true, + maximizable: true + }); + + ref.onClose.subscribe((item: Person) => { + if (item) { + //console.log("after close ward edit", item); + this.messageService.add({severity:'success', summary: 'Select', detail: item.firstName!}); + //update the current list + + } + }); +} + assignValue(item:Person): void { this._id = item.id; this.fileName = item.image!; @@ -537,7 +561,7 @@ showPickPerson(title:string, callback:(id: Person) => void) :void { }, header: title, width: '80%', - + draggable: true, maximizable: true }); diff --git a/UI/src/app/person/person.service.ts b/UI/src/app/person/person.service.ts index 81ee7a8..1bd4ba4 100644 --- a/UI/src/app/person/person.service.ts +++ b/UI/src/app/person/person.service.ts @@ -77,6 +77,13 @@ export class PersonService { const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/UploadImage"; return this.http.post>(baseUrl, data); } + downloadFile(imageName: string): Observable> { + const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadFile"; + const data = { + fileName: imageName + }; + return this.http.post>(baseUrl, data); + } deleteUploadFile(data: any): Observable> { //data ={filename}; const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/DeleteUploadFile"; diff --git a/UI/src/app/pickperson/image.display.css b/UI/src/app/pickperson/image.display.css new file mode 100644 index 0000000..e69de29 diff --git a/UI/src/app/pickperson/image.display.html b/UI/src/app/pickperson/image.display.html new file mode 100644 index 0000000..183a8b1 --- /dev/null +++ b/UI/src/app/pickperson/image.display.html @@ -0,0 +1,6 @@ +Person Image +
+ + +
\ No newline at end of file diff --git a/UI/src/app/pickperson/image.display.ts b/UI/src/app/pickperson/image.display.ts new file mode 100644 index 0000000..b876693 --- /dev/null +++ b/UI/src/app/pickperson/image.display.ts @@ -0,0 +1,64 @@ +import { Component, inject, OnDestroy, OnInit } from '@angular/core'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; +import { AppSettingService } from '../shares'; +import { PersonService } from '../person'; +import { Subscription } from 'rxjs'; +import { ActivatedRoute } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; +import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; + +@Component({ + selector: 'app-image-display', + imports:[CommonModule, ButtonModule], + templateUrl: './image.display.html', + styleUrls: ['./image.display.css'] +}) +export class ImageDisplayComponent implements OnInit, OnDestroy { + //base64ImageString: string = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; // Example Base64 (a tiny red dot PNG) + //imageDataUrl: SafeResourceUrl ={}; + imageDataUrl = ""; +private personService = inject(PersonService); +private sanitizer = inject(DomSanitizer); +//private route = inject(ActivatedRoute); +public ref = inject(DynamicDialogRef); + public config = inject(DynamicDialogConfig); +private subscription:Subscription = new Subscription(); + + ngOnInit(): void { + + const imageName = this.config.data.imageName; + this.loadImage(imageName); + + } + loadImage(fileName: string| null): void { + const download = this.personService.downloadFile(fileName!); + this.subscription.add(download.subscribe({ + next: x => { + if (x.statusCode == 1) + { + this.display(x.data); + console.log("this is show image" , this.imageDataUrl, x); + } + else + { + console.log("error in download in api ", x.message); + } + }, + error: e => console.error("error in download image", e) + })); + } + display(baseImage: string): void + { + const changeUrl = (this.sanitizer.bypassSecurityTrustResourceUrl(baseImage) as any).changingThisBreaksApplicationSecurity; + console.log('this is bypassSecurityTrustResourceUrl', changeUrl); + const fullDataUri = `data:image/png;base64,${changeUrl}`; + this.imageDataUrl = fullDataUri + } + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } + close() :void { + this.ref.close(null); + } +} \ No newline at end of file