diff --git a/src/app/directives/image-handler.spec.ts b/src/app/directives/image-handler.spec.ts
new file mode 100644
index 0000000..c709d5b
--- /dev/null
+++ b/src/app/directives/image-handler.spec.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { ImageHandler } from './image-handler';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'app-image-handler-mock',
+ imports: [ImageHandler, ReactiveFormsModule],
+ template: `
+
+ `,
+ styles: [],
+})
+class ImageHandlerTestBed {
+ form = new FormGroup({ image: new FormControl(null) });
+}
+
+describe('ImageHandler', () => {
+ let component: ImageHandlerTestBed;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ TestBed.configureTestingModule({
+ imports: [ImageHandlerTestBed],
+ }).compileComponents();
+ fixture = TestBed.createComponent(ImageHandlerTestBed);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/directives/image-handler.ts b/src/app/directives/image-handler.ts
new file mode 100644
index 0000000..37a5f73
--- /dev/null
+++ b/src/app/directives/image-handler.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectorRef, Directive, HostListener, inject, input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { take } from 'rxjs';
+//TODO: maybe this could be somehow integrated into the file input using ControlValueAccesor
+
+@Directive({
+ selector: '[appImageHandler]',
+})
+export class ImageHandler implements OnInit {
+ @HostListener('file', ['$event' as any]) updateFileImage(file: File | null) {
+ const control = this.imageControl();
+ control.patchValue(file);
+ control.markAsDirty();
+ }
+ imageControl = input>(new FormControl(null));
+ private readonly cd = inject(ChangeDetectorRef);
+
+ ngOnInit() {
+ this.imageControl()
+ .valueChanges.pipe(take(1))
+ .subscribe({
+ next: () => this.cd.markForCheck(),
+ });
+ }
+}