fix: make acceptable file types for attachments configurable

Author: sleidig

src/app/core/config/config-fix.ts

@@ -1049,7 +1049,10 @@ export const defaultJsonConfig = {
       },
       "birth_certificate": {
         "dataType": "file",
-        "label": $localize`:Label for a child attribute:Birth certificate`
+        "label": $localize`:Label for a child attribute:Birth certificate`,
+        "additional": {
+          "acceptedFileTypes": ".pdf"
+        }
       }
     },
   } as EntityConfig,

src/app/features/file/edit-file/edit-file.component.html

@@ -1,5 +1,6 @@
 <input
   type="file"
+  [accept]="acceptedFileTypes"
   style="display: none"
   (change)="onFileSelected($event.target['files'][0])"
   #fileUpload

src/app/features/file/edit-file/edit-file.component.spec.ts

@@ -16,6 +16,7 @@ import { FileService } from "../file.service";
 import { EntitySchemaService } from "../../../core/entity/schema/entity-schema.service";
 import { EntityMapperService } from "../../../core/entity/entity-mapper/entity-mapper.service";
 import { NAVIGATOR_TOKEN } from "../../../utils/di-tokens";
+import { FileFieldConfig } from "../file.datatype";
 
 describe("EditFileComponent", () => {
   let component: EditFileComponent;
@@ -57,6 +58,19 @@ describe("EditFileComponent", () => {
     expect(component).toBeTruthy();
   });
 
+  it("should use acceptedFileTypes from field config", () => {
+    setupComponent();
+    component.formFieldConfig = {
+      id: "testProp",
+      dataType: "file",
+      additional: { acceptedFileTypes: ".png" } as FileFieldConfig,
+    };
+
+    component.ngOnInit();
+
+    expect(component.acceptedFileTypes).toBe(".png");
+  });
+
   it("should not upload a file that was selected but the process was canceled", () => {
     setupComponent();
     component.formControl.enable();

src/app/features/file/edit-file/edit-file.component.ts

@@ -22,6 +22,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { ErrorHintComponent } from "../../../core/common-components/error-hint/error-hint.component";
 import { NotAvailableOfflineError } from "../../../core/session/not-available-offline.error";
 import { NAVIGATOR_TOKEN } from "../../../utils/di-tokens";
+import { FileFieldConfig } from "../file.datatype";
 
 /**
  * This component should be used as a `editComponent` when a property should store files.
@@ -51,6 +52,18 @@ export class EditFileComponent extends EditComponent<string> implements OnInit {
   private removeClicked = false;
   initialValue: string;
 
+  /**
+   * config for the given form field / entity attribute, containing special settings for this component.
+   * (re-declared here for better typing)
+   */
+  declare additional: FileFieldConfig;
+
+  /**
+   * The accepted file types for file selection dialog.
+   * If not defined, allows any file.
+   */
+  acceptedFileTypes: string = "*";
+
   constructor(
     protected fileService: FileService,
     private alertService: AlertService,
@@ -63,6 +76,10 @@ export class EditFileComponent extends EditComponent<string> implements OnInit {
   override ngOnInit() {
     super.ngOnInit();
     this.initialValue = this.formControl.value;
+
+    this.acceptedFileTypes =
+      this.additional?.acceptedFileTypes ?? this.acceptedFileTypes;
+
     this.formControl.statusChanges
       .pipe(
         distinctUntilChanged(),

src/app/features/file/edit-photo/edit-photo.component.html

@@ -35,7 +35,7 @@
     type="file"
     style="display: none"
     (change)="onFileSelected($event.target['files'][0])"
-    accept="image/*"
+    [accept]="acceptedFileTypes"
     #fileUpload
   />
 </div>

src/app/features/file/edit-photo/edit-photo.component.ts

@@ -58,7 +58,8 @@ export class EditPhotoComponent extends EditFileComponent implements OnInit {
 
   override ngOnInit() {
     super.ngOnInit();
-    this.compression = this.additional ?? this.compression;
+    this.compression = this.additional?.imageCompression ?? this.compression;
+    this.acceptedFileTypes = this.additional?.acceptedFileTypes ?? "image/*";
     if (this.formControl.value) {
       this.fileService
         .loadFile(this.entity, this.formControlName)

src/app/features/file/file.datatype.ts

@@ -43,3 +43,19 @@ export class FileDatatype extends StringDatatype {
     );
   }
 }
+
+/**
+ * (Optional) "additional" object to configure details of a "file" datatype / form field.
+ */
+export interface FileFieldConfig {
+  /**
+   * The accepted file types for file selection dialog.
+   * If not defined, allows any file.
+   */
+  acceptedFileTypes?: string;
+
+  /**
+   * The maxSize to which the image will be automatically resized before upload.
+   */
+  imageCompression?: number;
+}