<div class="upload-widget {{field.className}}"
     [class.upload-widget__invalid]="!field.isValid">
    <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
    <div>
        <i *ngIf="hasFile" class="material-icons upload-widget__icon">attachment</i>
        <span *ngIf="hasFile" class="upload-widget__file">{{displayText}}</span>
        <input *ngIf="!hasFile"
               #file
               type="file"
               [attr.id]="field.id"
               class="upload-widget__file"
               (change)="onFileChanged($event)">
        <button *ngIf="hasFile" (click)="reset(file);"
                class="mdl-button mdl-js-button mdl-button--icon upload-widget__reset">
            <i class="material-icons">highlight_off</i>
        </button>
    </div>
    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>
