fix: make acceptable file types for attachments configurable

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;
+}