put all thing in there now

API/FamilyTreeAPI/Dockerfile

@@ -11,6 +11,20 @@ COPY . .
 WORKDIR "/src/FamilyTreeAPI"
 RUN dotnet build "./FamilyTreeAPI.csproj" -c Release -o /app/build
 
+# create directory for import folder, and image folder
+RUN mkdir /app_import
+
+RUN mkdir /app_images
+
+VOLUME /app_import
+
+VOLUME /app_images
+#  docker run -v my_path_name_volume_host:/app_import my_image_name
+#  docker run -v my_path_named_volume_host:/app_images my_image_name
+# docker cp /home/user/my_app/config.json my_container:/app/config.json
+#  docker cp /home/user/my_app/data my_container:/app/data ### copy folder data
+# docker cp mycontainer:/app/output.txt /home/user/documents/
+
 # This stage is used to publish the service project to be copied to the final stage
 FROM build AS publish
 

UI/src/app/person/familylist.ts

@@ -277,6 +277,7 @@ export class FamilyList implements OnInit, OnDestroy{
     },
       header: 'Person',
       width: '80%',
+      draggable: true,
       maximizable: true
     });
     

UI/src/app/pickperson/image.display.html

@@ -1,4 +1,4 @@
-<img [src]="imageDataUrl" alt="Person Image" width="400" height="300"/>
+<img [src]="imageDataUrl()" alt="Person Image" width="400" height="300"/>
 <div class="flex justify-end">
     
         <button pButton pRipple class="p-button-sm mr-2 p-button-secondary" type="button" icon="pi pi-sign-in" label="Close"

UI/src/app/pickperson/image.display.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { AppSettingService } from '../shares';
 import { PersonService } from '../person';
@@ -17,13 +17,13 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 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); 
+  imageDataUrl = signal<string>("");
+  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();
+  private subscription:Subscription = new Subscription();
 
  ngOnInit(): void {
     
@@ -38,7 +38,7 @@ private subscription:Subscription = new Subscription();
         if (x.statusCode == 1)
         {
           this.display(x.data);
-          console.log("this is show image" , this.imageDataUrl, x);
+          console.log("this is show image" , this.imageDataUrl(), x);
         }
         else
         {
@@ -53,7 +53,7 @@ private subscription:Subscription = new Subscription();
     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
+    this.imageDataUrl.set(fullDataUri);
   }
   ngOnDestroy(): void {
     this.subscription.unsubscribe();