Phase 5 abgeschlossen: Dateien mit vollständiger Prüfkette
Upload → quarantine/ → Typprüfung → ClamAV → Neukodierung → store/. Es gibt keinen Pfad, auf dem eine Datei ungeprüft in store/ landet, und keinen Schalter, der die Kette abschaltet. Die Typprüfung liest Magic Bytes aus einer eigenen Signaturtabelle statt aus file-type: bei einer Positivliste aus fünf Formaten hilft es nicht, hundert erkennen zu können. Die Signatur muss an Position 0 stehen — ein Vorspann vor %PDF- ist der klassische Weg, eine Datei für zwei Programme zugleich lesbar zu machen. Wer trotzdem durchkommt, kommt als text/plain durch und wird unter der Endung des erkannten Typs ausgeliefert, nicht unter der hochgeladenen. Drei Ausgänge statt zwei: BLOCKED heisst "ist gefährlich", FAILED heisst "wissen wir nicht". Nur FAILED lässt sich freigeben, und die Freigabe wiederholt die Kette ohne den Scanner — Typprüfung und Neukodierung laufen dabei mit. Ein fehlender clamd macht damit keine Datei sauber; ein Test hält das fest. Auslieferung nur über /api/files/[id], mit Sichtbarkeitsprüfung der zugehörigen Akte, Protokoll ab Stufe 3 und den harten Kopfzeilen aus docs/07. Vorschaubilder dürfen inline, weil sie serverseitig als WebP neu kodiert wurden. Das Lichtbild im Aktenblatt ist damit gefüllt: der Feldwert ist die Kennung eines geprüften Anhangs, serverseitig zu einer Adresse aufgelöst. /api/events liefert attachment.scanned über pg_notify — die Grundlage, auf der Phase 6 den Aktenchat aufsetzt. Die Sichtbarkeit wird je Ereignis geprüft, sonst verriete schon die Kennung die Existenz. Nebenbei riss das Bündelbudget (121 kB gegen 120 erlaubte): lib/i18n/de.ts war ein Objekt, und eine Client-Komponente zieht die ganze Datei mit. Die Texte stehen jetzt in sechs Dateien nach Bereichen, de.ts setzt sie nur zusammen. Grösste Route wieder bei 118 kB, und sie wächst nicht mehr mit jedem neuen Bereich mit. 133 Tests im Web-Paket, 15 in der Datenbank, 28 e2e. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harlekin
co-authored by
Claude Opus 5
Claude Opus 5
parent
68ad0debd3
commit
5f58d9b96f
@@ -0,0 +1,250 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useRef, useState, useTransition } from 'react'
|
||||
import { attachmentText } from '@/lib/i18n/documents'
|
||||
import { MAX_FILE_BYTES, formatBytes } from '@/lib/files/limits'
|
||||
import { releaseAttachmentAction } from '@/app/(app)/dateien/actions'
|
||||
import { useScanEvents, type ScanEvent } from './useScanEvents'
|
||||
|
||||
export type AttachmentView = {
|
||||
id: string
|
||||
originalName: string
|
||||
mimeType: string
|
||||
sizeBytes: number
|
||||
scanStatus: string
|
||||
scanMessage: string | null
|
||||
blurhash: string | null
|
||||
width: number | null
|
||||
height: number | null
|
||||
hasThumb: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
/** Welchem Besitzer die Datei angehängt wird. Genau eines der drei Felder. */
|
||||
export type UploadTarget = {
|
||||
caseNumber?: string
|
||||
entryId?: string
|
||||
documentNumber?: string
|
||||
}
|
||||
|
||||
type Laufend = { key: string; name: string; progress: number; error?: string }
|
||||
|
||||
/**
|
||||
* Anhänge einer Akte, eines Eintrags oder eines Dokuments.
|
||||
*
|
||||
* Der Ablauf folgt docs/09-performance-und-ux.md: die Datei erscheint sofort
|
||||
* in der Liste, der Fortschrittsbalken zeigt nur die **Übertragung**, und
|
||||
* danach steht „Wird geprüft", bis das Ereignis aus `/api/events` kommt. Kein
|
||||
* Balken wartet auf einen Virenscanner, und kein Spinner blockiert die Seite.
|
||||
*/
|
||||
export function Attachments({
|
||||
target,
|
||||
initial,
|
||||
canUpload,
|
||||
canRelease,
|
||||
}: {
|
||||
target: UploadTarget
|
||||
initial: AttachmentView[]
|
||||
canUpload: boolean
|
||||
canRelease: boolean
|
||||
}) {
|
||||
const [dateien, setDateien] = useState<AttachmentView[]>(initial)
|
||||
const [laufend, setLaufend] = useState<Laufend[]>([])
|
||||
const [pending, startTransition] = useTransition()
|
||||
const eingabe = useRef<HTMLInputElement>(null)
|
||||
|
||||
const uebernehmen = useCallback((event: ScanEvent) => {
|
||||
setDateien((bisher) =>
|
||||
bisher.map((datei) =>
|
||||
datei.id === event.id
|
||||
? {
|
||||
...datei,
|
||||
scanStatus: event.scanStatus,
|
||||
scanMessage: event.scanMessage,
|
||||
mimeType: event.mimeType,
|
||||
sizeBytes: event.sizeBytes,
|
||||
blurhash: event.blurhash,
|
||||
width: event.width,
|
||||
height: event.height,
|
||||
hasThumb: event.hasThumb,
|
||||
}
|
||||
: datei,
|
||||
),
|
||||
)
|
||||
}, [])
|
||||
|
||||
useScanEvents(uebernehmen)
|
||||
|
||||
function hochladen(datei: File) {
|
||||
const key = `${datei.name}-${Date.now()}-${Math.random()}`
|
||||
if (datei.size > MAX_FILE_BYTES) {
|
||||
setLaufend((l) => [
|
||||
...l,
|
||||
{ key, name: datei.name, progress: 0, error: attachmentText.errors['file-too-large'] },
|
||||
])
|
||||
return
|
||||
}
|
||||
|
||||
setLaufend((l) => [...l, { key, name: datei.name, progress: 0 }])
|
||||
|
||||
const form = new FormData()
|
||||
form.set('file', datei)
|
||||
for (const [feld, wert] of Object.entries(target)) {
|
||||
if (wert) form.set(feld, wert)
|
||||
}
|
||||
|
||||
// XMLHttpRequest und nicht fetch: nur so gibt es einen echten
|
||||
// Fortschritt beim Senden. `fetch` meldet ihn bis heute nicht.
|
||||
const anfrage = new XMLHttpRequest()
|
||||
anfrage.open('POST', '/api/files')
|
||||
|
||||
anfrage.upload.addEventListener('progress', (event) => {
|
||||
if (!event.lengthComputable) return
|
||||
const anteil = Math.round((event.loaded / event.total) * 100)
|
||||
setLaufend((l) => l.map((e) => (e.key === key ? { ...e, progress: anteil } : e)))
|
||||
})
|
||||
|
||||
anfrage.addEventListener('load', () => {
|
||||
const fertig = () => setLaufend((l) => l.filter((e) => e.key !== key))
|
||||
if (anfrage.status === 201) {
|
||||
const { id } = JSON.parse(anfrage.responseText) as { id: string }
|
||||
setDateien((bisher) => [
|
||||
...bisher,
|
||||
{
|
||||
id,
|
||||
originalName: datei.name,
|
||||
mimeType: datei.type || 'application/octet-stream',
|
||||
sizeBytes: datei.size,
|
||||
scanStatus: 'PENDING',
|
||||
scanMessage: null,
|
||||
blurhash: null,
|
||||
width: null,
|
||||
height: null,
|
||||
hasThumb: false,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
])
|
||||
fertig()
|
||||
return
|
||||
}
|
||||
|
||||
let meldung = attachmentText.errors.transfer!
|
||||
try {
|
||||
meldung = (JSON.parse(anfrage.responseText) as { error?: string }).error ?? meldung
|
||||
} catch {
|
||||
// Antwort ohne JSON, dann bleibt die allgemeine Meldung.
|
||||
}
|
||||
setLaufend((l) => l.map((e) => (e.key === key ? { ...e, error: meldung } : e)))
|
||||
})
|
||||
|
||||
anfrage.addEventListener('error', () => {
|
||||
setLaufend((l) =>
|
||||
l.map((e) => (e.key === key ? { ...e, error: attachmentText.errors.transfer! } : e)),
|
||||
)
|
||||
})
|
||||
|
||||
anfrage.send(form)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{dateien.length === 0 && laufend.length === 0 ? (
|
||||
<p className="text-text-dim">{attachmentText.empty}</p>
|
||||
) : (
|
||||
<ul className="border-t border-line">
|
||||
{dateien.map((datei) => (
|
||||
<li key={datei.id} className="border-b border-line py-2">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||
{datei.hasThumb ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={`/api/files/${datei.id}?variant=thumb`}
|
||||
alt=""
|
||||
className="h-10 w-10 border border-line object-cover"
|
||||
/>
|
||||
) : null}
|
||||
<span className="grow text-sm">{datei.originalName}</span>
|
||||
<span className="font-mono text-2xs text-text-dim">
|
||||
{formatBytes(datei.sizeBytes)}
|
||||
</span>
|
||||
<span
|
||||
className={`font-condensed text-2xs ${
|
||||
datei.scanStatus === 'BLOCKED' ? 'text-stamp-4' : 'text-text-dim'
|
||||
}`}
|
||||
>
|
||||
{attachmentText.statusNames[datei.scanStatus] ?? datei.scanStatus}
|
||||
</span>
|
||||
{datei.scanStatus === 'CLEAN' ? (
|
||||
<a href={`/api/files/${datei.id}`} className="font-condensed text-2xs">
|
||||
{attachmentText.download}
|
||||
</a>
|
||||
) : null}
|
||||
{datei.scanStatus === 'FAILED' && canRelease ? (
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
title={attachmentText.releaseHint}
|
||||
onClick={() =>
|
||||
startTransition(async () => {
|
||||
await releaseAttachmentAction({ id: datei.id })
|
||||
})
|
||||
}
|
||||
className="font-condensed text-2xs text-stamp-3"
|
||||
>
|
||||
{attachmentText.release}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
{datei.scanMessage ? (
|
||||
<p className="mt-1 text-2xs text-text-dim">{datei.scanMessage}</p>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
|
||||
{laufend.map((eintrag) => (
|
||||
<li key={eintrag.key} className="border-b border-line py-2">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||
<span className="grow text-sm text-text-dim">{eintrag.name}</span>
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{eintrag.error ?? `${attachmentText.uploading} ${eintrag.progress} %`}
|
||||
</span>
|
||||
</div>
|
||||
{!eintrag.error ? (
|
||||
<div className="mt-1 h-0.5 w-full bg-raised">
|
||||
<div
|
||||
className="h-full bg-accent transition-[width] duration-150"
|
||||
style={{ width: `${eintrag.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{canUpload ? (
|
||||
<div className="mt-4">
|
||||
<input
|
||||
ref={eingabe}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/png,image/jpeg,image/webp,application/pdf,text/plain"
|
||||
onChange={(event) => {
|
||||
for (const datei of event.target.files ?? []) hochladen(datei)
|
||||
event.target.value = ''
|
||||
}}
|
||||
className="hidden"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => eingabe.current?.click()}
|
||||
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
|
||||
>
|
||||
{attachmentText.add}
|
||||
</button>
|
||||
<p className="mt-1 text-2xs text-text-dim">{attachmentText.allowed}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
import { attachmentText, documentText } from '@/lib/i18n/documents'
|
||||
import { MAX_FILE_BYTES } from '@/lib/files/limits'
|
||||
import { useScanEvents, type ScanEvent } from './useScanEvents'
|
||||
import type { SaveSection } from '@/components/sections/types'
|
||||
|
||||
/**
|
||||
* Das Lichtbild im Aktenblatt.
|
||||
*
|
||||
* Der Wert des Feldes ist die **Kennung eines geprüften Anhangs**, nie das
|
||||
* Bild selbst. Ein Bild als Data-URL im Abschnittswert liefe an der ganzen
|
||||
* Prüfkette vorbei und wäre nachträglich kaum wieder herauszubekommen.
|
||||
* Siehe docs/07-dateien-und-sicherheit.md.
|
||||
*
|
||||
* Deshalb zwei Schritte hintereinander: hochladen, dann die Kennung in den
|
||||
* Abschnitt schreiben. Angezeigt wird erst, wenn die Prüfung durch ist.
|
||||
*/
|
||||
export function PhotoField({
|
||||
save,
|
||||
fieldKey,
|
||||
label,
|
||||
documentNumber,
|
||||
initialAttachmentId,
|
||||
initialUrl,
|
||||
initialVersion,
|
||||
readOnly,
|
||||
}: {
|
||||
save: SaveSection
|
||||
fieldKey: string
|
||||
label: string
|
||||
documentNumber: string
|
||||
initialAttachmentId: string | null
|
||||
initialUrl: string | null
|
||||
initialVersion: number
|
||||
readOnly: boolean
|
||||
}) {
|
||||
const [url, setUrl] = useState(initialUrl)
|
||||
const [version, setVersion] = useState(initialVersion)
|
||||
const [wartetAuf, setWartetAuf] = useState<string | null>(
|
||||
initialAttachmentId && !initialUrl ? initialAttachmentId : null,
|
||||
)
|
||||
const [fortschritt, setFortschritt] = useState<number | null>(null)
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
const eingabe = useRef<HTMLInputElement>(null)
|
||||
|
||||
const geprueft = useCallback(
|
||||
(event: ScanEvent) => {
|
||||
if (event.id !== wartetAuf) return
|
||||
if (event.scanStatus === 'CLEAN') {
|
||||
setUrl(`/api/files/${event.id}?variant=thumb`)
|
||||
setWartetAuf(null)
|
||||
return
|
||||
}
|
||||
if (event.scanStatus !== 'PENDING') {
|
||||
setFehler(event.scanMessage ?? attachmentText.statusNames[event.scanStatus]!)
|
||||
setWartetAuf(null)
|
||||
}
|
||||
},
|
||||
[wartetAuf],
|
||||
)
|
||||
|
||||
useScanEvents(geprueft)
|
||||
|
||||
function waehlen(datei: File) {
|
||||
setFehler(null)
|
||||
if (datei.size > MAX_FILE_BYTES) {
|
||||
setFehler(attachmentText.errors['file-too-large']!)
|
||||
return
|
||||
}
|
||||
|
||||
const form = new FormData()
|
||||
form.set('file', datei)
|
||||
form.set('documentNumber', documentNumber)
|
||||
|
||||
const anfrage = new XMLHttpRequest()
|
||||
anfrage.open('POST', '/api/files')
|
||||
setFortschritt(0)
|
||||
|
||||
anfrage.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
setFortschritt(Math.round((event.loaded / event.total) * 100))
|
||||
}
|
||||
})
|
||||
|
||||
anfrage.addEventListener('load', async () => {
|
||||
setFortschritt(null)
|
||||
if (anfrage.status !== 201) {
|
||||
try {
|
||||
setFehler(
|
||||
(JSON.parse(anfrage.responseText) as { error?: string }).error ??
|
||||
attachmentText.errors.transfer!,
|
||||
)
|
||||
} catch {
|
||||
setFehler(attachmentText.errors.transfer!)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const { id } = JSON.parse(anfrage.responseText) as { id: string }
|
||||
// Die Kennung sofort in den Abschnitt schreiben, auch wenn die Prüfung
|
||||
// noch läuft: sonst ginge die Zuordnung verloren, wenn der Nutzer die
|
||||
// Seite verlässt.
|
||||
const ergebnis = await save({ fieldKey, value: id, baseVersion: version })
|
||||
if (ergebnis.ok) {
|
||||
setVersion(ergebnis.version)
|
||||
setWartetAuf(id)
|
||||
setUrl(null)
|
||||
} else if (!ergebnis.conflict) {
|
||||
setFehler(ergebnis.error)
|
||||
}
|
||||
})
|
||||
|
||||
anfrage.addEventListener('error', () => {
|
||||
setFortschritt(null)
|
||||
setFehler(attachmentText.errors.transfer!)
|
||||
})
|
||||
|
||||
anfrage.send(form)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="font-condensed text-xs text-text-dim">{label}</p>
|
||||
<div className="mt-1.5 flex items-start gap-4">
|
||||
<div className="flex h-40 w-30 items-center justify-center border border-line bg-raised text-center text-2xs text-text-dim">
|
||||
{url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={url} alt={label} className="h-full w-full object-cover" />
|
||||
) : wartetAuf ? (
|
||||
attachmentText.checking
|
||||
) : (
|
||||
documentText.photoEmpty
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!readOnly ? (
|
||||
<div>
|
||||
<input
|
||||
ref={eingabe}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
onChange={(event) => {
|
||||
const datei = event.target.files?.[0]
|
||||
if (datei) waehlen(datei)
|
||||
event.target.value = ''
|
||||
}}
|
||||
className="hidden"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={fortschritt !== null}
|
||||
onClick={() => eingabe.current?.click()}
|
||||
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
|
||||
>
|
||||
{fortschritt === null
|
||||
? attachmentText.choose
|
||||
: `${attachmentText.uploading} ${fortschritt} %`}
|
||||
</button>
|
||||
{fehler ? (
|
||||
<p className="mt-2 max-w-60 font-condensed text-2xs text-stamp-4">{fehler}</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export type ScanEvent = {
|
||||
id: string
|
||||
scanStatus: 'PENDING' | 'CLEAN' | 'BLOCKED' | 'FAILED'
|
||||
scanMessage: string | null
|
||||
mimeType: string
|
||||
sizeBytes: number
|
||||
blurhash: string | null
|
||||
width: number | null
|
||||
height: number | null
|
||||
hasThumb: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Hört auf das Ende von Dateiprüfungen.
|
||||
*
|
||||
* Eine einzige Verbindung je Seite, vom Browser selbst wieder aufgebaut, wenn
|
||||
* sie abreisst. Kein Abfragen im Sekundentakt: eine Prüfung dauert je nach
|
||||
* Dateigrösse zwischen einer und dreissig Sekunden, und solange im Leerlauf zu
|
||||
* fragen wäre auf einem Heimserver unhöflich.
|
||||
*/
|
||||
export function useScanEvents(onScanned: (event: ScanEvent) => void): void {
|
||||
useEffect(() => {
|
||||
const quelle = new EventSource('/api/events')
|
||||
|
||||
const handler = (message: MessageEvent<string>) => {
|
||||
try {
|
||||
onScanned(JSON.parse(message.data) as ScanEvent)
|
||||
} catch {
|
||||
// Kaputte Nutzlast ignorieren, der nächste Seitenaufbau hat den Stand.
|
||||
}
|
||||
}
|
||||
|
||||
quelle.addEventListener('attachment.scanned', handler as EventListener)
|
||||
return () => {
|
||||
quelle.removeEventListener('attachment.scanned', handler as EventListener)
|
||||
quelle.close()
|
||||
}
|
||||
}, [onScanned])
|
||||
}
|
||||
Reference in New Issue
Block a user