first-npm-package-nicule/material-inputs/components/file/file-field.component.html

This isi first npm package

<div class="input-wrapper">
    <div class="dropify-wrapper">
        <div *ngIf="!ngModel.control.value?.fileName" class="dropify-message">
            <i class="material-icons dropify-icon">cloud_upload</i>
            <div>{{ label | translate }}</div>
        </div>
        <input #fileInput type="file" (change)="onFileChange($event)" class="dropify" (keydown.enter)="$event.stopPropagation()"/>
        <i *ngIf="ngModel.control.value?.fileName" class="material-icons remove-file" (click)="removeFile()">close</i>
        <div *ngIf="ngModel.control.value?.fileName" class="dropify-preview">
            <i class="material-icons dropify-icon">insert_drive_file</i>
            <div>{{ngModel.control.value?.fileName}}</div>
        </div>
    </div>
    <div *ngIf="fieldInfo" class="info-box">
        <mat-icon>info_outline</mat-icon>
        <i [innerHtml]="fieldInfo"></i>
    </div>
    <mat-hint *ngFor="let error of errors" class="error-input-hint">
        {{error.message | translate: error.payload }}
    </mat-hint>
</div>

<input type="hidden" [ngModel]="field.value" [name]="field.name" [required]="field.required" />