    <div class="card gap-2">
        <div class="mt-4">
                <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload multiple>                
                <div class="file-upload">
                    <label>{{fileName || "Photo upload:"}}</label>
                    <button pButton type="button" icon="pi pi-paperclip"
                        class="p-button-rounded p-button-text p-button-raised ml-2" pTooltip="attach file"
                        (click)="fileUpload.click()"></button>
                </div>
               <div class="flex items-end justify-end mt-4">
                @if (files)
                {
                <button pButton pRipple type="button" icon="pi pi-upload" label="Add Photo" class="p-button-sm mr-2"
                    (click)="upload($event)"></button>
                }
            <button pButton pRipple type="button" icon="pi pi-times" label="Cancel" class="p-button-sm"
                (click)="cancel($event)"></button>
        </div>   
        </div>
    </div>    
