<div [id]="getObjectId()"
     class="ervu-file-upload"
     [ngbTooltip]="tooltip | emptyIfNull">
    <div ng2FileDrop
         [uploader]="uploader"
         class="file-drop-zone"
         *ngIf="(!maxFilesToUpload || uploader.queue.length < maxFilesToUpload) && isDropZoneVisible">
        <span class="select-file-field-text">{{selectFileFieldText}}</span>
        <button class="select-file-btn" (click)="openFileChooseDialog()">{{selectFileButtonName}}</button>
    </div>
    <!-- input is out of file-drop-zone because after change ngIf condition input doesn't firing events -->
    <input type="file"
           class="file-input"
           ng2FileSelect
           [uploader]="uploader"
           [multiple]="!maxFilesToUpload || maxFilesToUpload > 1"
           [accept]="getExtensions()"
           hidden>
    <div class="selected-file-list" *ngIf="isFilesListVisible">
        <div class="selected-file" *ngFor="let item of uploader.queue">
            <span class="selected-file-name" [ngClass]="getFileIconClass()">{{item?.file?.name}}</span>
            <span class="selected-file-size" *ngIf="displayFileSize">{{item?.file?.size/1024/1024 | number: '.2'}} MB</span>
            <button class="selected-file-delete-btn" (click)="removeFile(item)">{{removeFileButtonName}}</button>
        </div>
    </div>
    <div class="file-upload-progress" *ngIf="displayProgressBar && isProgressBarVisible">
        <div class="file-upload-progress-bar"
             role="progressbar"
             [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
    </div>
</div>