Zum Hauptinhalt springen
Sachbearbeiter-Cockpit

FileManager

Dokumenten-Bereich für ein Objekt: listet die bereits hochgeladenen Dokumente und nimmt — im editable-Modus — neue über Dropzone, Datei-Dialog oder Drag & Drop an. Die Kontext-Id wird als $apiId aus der dataSource gelesen.

Vorschau​

Die Vorschau übergibt einen eigenen documentsStore mit zwei Demo-Dokumenten — dadurch braucht das Widget hier keinen Tenant-Context und stellt keine Netzwerk-Requests. Links der Standardfall (editable), rechts die reine Leseansicht.

Dokumente hochladen

Ziehen Sie Dateien hierher oder klicken Sie zum Auswählen

Maximal 5 Dateien, je bis 10 MB

Antrag_2026-01-15.pdf242.19 KB
Lichtbild.jpg1.38 MB

Dokumente

Antrag_2026-01-15.pdf242.19 KB
Lichtbild.jpg1.38 MB

Im Sachbearbeiter-Cockpit verwenden​

Die dataSource ist dieselbe wie für die übrigen Widgets der Detailansicht — der FileManager liest daraus nur die Kontext-Id ($apiId), siehe Datenquellen. Was beim Hochladen tatsächlich passiert (zwei Requests, einmalig aufgelöste Vorgabe-Ids), steht unter Der Upload ist zweistufig.

Props​

Props für das FileManager Component.

Properties​

accept?​

optional accept?: string

Erlaubte Dateitypen in der Syntax des HTML-accept-Attributs: Endung (".pdf"), MIME-Typ ("application/pdf"), Gruppe ("image/*") oder mehrere komma-separiert. Wird im Datei-Dialog und bei Drag & Drop geprüft.

className?​

optional className?: string

Zusätzliche Klassen für den äußeren Container (Überschrift, Dropzone und Dokumentliste). Sie werden an die Default-Klassen angehängt.

dataSource​

dataSource: () => UseQueryResult<JsonObject, Error>

Datenquelle als Query-Funktion

Returns​

UseQueryResult<JsonObject, Error>

description?​

optional description?: string

Text in der Dropzone. Default: „Ziehen Sie Dateien hierher oder klicken Sie zum Auswählen". Nur sichtbar, solange editable gilt — ohne Dropzone gibt es keinen Platz dafür.

documentsStore?​

optional documentsStore?: DocumentsStore

Bündel aus Lese-Hook und Upload-Mutation. Ohne Angabe wird DEFAULT_DOCUMENTS_STORE genutzt, also die Core-Hooks useDocumentsByFile / useUploadDocument — die brauchen einen Tenant-Context. Für Tests oder Vorschauen ein eigenes DocumentsStore-Bündel setzen.

editable?​

optional editable?: boolean

Darf der User Dokumente hinzufügen?

  • true (Default): Dropzone, Datei-Dialog und Drag & Drop.
  • false: reine Leseansicht — die Dokumente bleiben anklickbar (Öffnen in neuem Tab), es gibt aber keine Dropzone, keinen Datei-Dialog und kein Drag & Drop.

Entfernen kann das Widget nicht — die API bietet dafür (noch) keinen Weg.

Rein UI-seitig: ob der angemeldete User im Backend wirklich hochladen darf, entscheidet weiterhin die API.

maxFiles?​

optional maxFiles?: number

Maximale Anzahl Dokumente – bereits hochgeladene mitgezählt.

maxFileSize?​

optional maxFileSize?: number

Maximale Größe je Datei in Bytes. Ohne Angabe wird die Größe nicht geprüft, da die Lib das Limit des Backends nicht kennt.

title?​

optional title?: string

Überschrift. Ohne Angabe: „Dokumente hochladen" (editable) bzw. „Dokumente" (read-only). Leerstring blendet die Überschrift aus.

DocumentsStore​

Zugriff auf die Dokumente eines Objekts: Lesen + Hochladen. Analog zum ObjectStore von Assignment — wird die Prop FileManagerProps.documentsStore weggelassen, nutzt das Widget DEFAULT_DOCUMENTS_STORE (die Core-Hooks mit Tenant aus dem Context).

Properties​

useByFile​

useByFile: (fileId, options?, tenant?) => UseQueryResult<DocumentSummary[], Error>

Lade-Hook für die Dokumente eines Objekts (Tenant optional, sonst aus Context).

Parameters​
fileId​

string

options?​
enabled?​

boolean

tenant?​

string

Returns​

UseQueryResult<DocumentSummary[], Error>

useUpload​

useUpload: (tenant?) => UseMutationResult<JsonObject, Error, { file: File; fileId: string; }, unknown>

Mutation-Hook zum Hochladen; erwartet { fileId, file }.

Parameters​
tenant?​

string

Returns​

UseMutationResult<JsonObject, Error, { file: File; fileId: string; }, unknown>

Was das Widget nicht kann​

  • Entfernen von Dokumenten — die API bietet dafür (noch) keinen Weg.
  • Berechtigungen prüfen. editable steuert nur die Oberfläche; ob der angemeldete User tatsächlich hochladen darf, entscheidet die API.
  • Größe ohne maxFileSize begrenzen — ohne Angabe wird die Dateigröße clientseitig nicht geprüft, weil die Library das Limit des Backends nicht kennt.