@if (!file) {
    <div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" class="upload-area" iqserDragDropFileUpload>
        <mat-icon svgIcon="iqser:upload"></mat-icon>
        <div translate="upload-file.upload-area-text"></div>
    </div>
}
@if (file) {
    <div class="file-area">
        <mat-icon svgIcon="iqser:document"></mat-icon>
        <p>{{ file.name }}</p>
        @if (!readonly) {
            <mat-icon (click)="removeFile()" svgIcon="iqser:trash"></mat-icon>
        }
    </div>
}

<input
    #attachFileInput
    (change)="attachFile($event)"
    [accept]="accept"
    [hidden]="true"
    class="file-upload-input"
    id="file-upload-input"
    type="file"
/>