imaq/angular/src/app/_components/image-upload/image-upload.component.html

<div class="mb-3">
    <label [for]="fieldId" class="form-label">{{ label }}:</label>

    <!-- File-Input ist deaktiviert, wenn ein Bild existiert und nicht zum Löschen markiert ist -->
    <input type="file" class="form-control" [id]="fieldId"
           [disabled]="disabled || (imageUrl && showImage)"
           (change)="onFileSelected($event)"/>

    @if (selectedFile) {
        <small class="text-muted">{{ selectedFile.name }}</small>
    }

    @if (imageUrl && showImage) {
        <div class="mt-1 d-flex align-items-start gap-2">
            <img [src]="imageUrl" [alt]="label" class="img-fluid" />
            <button type="button" class="btn btn-sm btn-danger" (click)="deleteImage()">X</button>
        </div>
    }
</div>