refactor: chain form to use handleImage directive

src/app/pages/settings/chains/chain-form/chain-form.html

@@ -4,5 +4,9 @@
     <mat-label>{{'common.name'|translate|upperfirst}}</mat-label>
     <input matInput formControlName="name"/>
   </mat-form-field>
-  <app-image-uploader (file)="updateFileImage($event)" [fileIn]="form.controls.image.value"></app-image-uploader>
+  <app-image-uploader
+    appImageHandler
+    [imageControl]="form.controls.image" 
+    [fileIn]="form.controls.image.value"
+  />
 </form>

src/app/pages/settings/chains/chain-form/chain-form.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, inject, input, OnDestroy, OnInit } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ImageUploader } from '../../../../components/image-uploader/image-uploader';
@@ -6,11 +6,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ChainFormGroup } from '../chain-formgroup';
 import { TranslatePipe } from '@ngx-translate/core';
 import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
-import { Subscription } from 'rxjs';
+import { ImageHandler } from '../../../../directives/image-handler';
 
 @Component({
   selector: 'app-chain-form',
   imports: [
+    ImageHandler,
     ImageUploader,
     MatFormFieldModule,
     MatInputModule,
@@ -21,24 +22,6 @@ import { Subscription } from 'rxjs';
   templateUrl: './chain-form.html',
   styles: ``,
 })
-export class ChainForm implements OnInit, OnDestroy {
+export class ChainForm {
   form = input(new ChainFormGroup());
-  private readonly cd = inject(ChangeDetectorRef);
-  private imageSubscription?: Subscription;
-
-  ngOnInit() {
-    this.imageSubscription = this.form().controls.image.valueChanges.subscribe({
-      next: () => this.cd.detectChanges(),
-    });
-  }
-
-  updateFileImage(file: File) {
-    const form = this.form();
-    form.controls.image.patchValue(file);
-    form.controls.image.markAsDirty();
-  }
-
-  ngOnDestroy() {
-    this.imageSubscription?.unsubscribe();
-  }
 }