1<mat-form-field class="columns">
2    <mat-label *ngIf="selectedFiles; else newFile">{{selectedFiles.item(0).name}}</mat-label>
3    <ng-template #newFile>
4        <mat-label>Choose file</mat-label>
5    </ng-template>
6    <input matInput disabled>
7    <button mat-icon-button matSuffix (click)="fileInput.click()">
8        <mat-icon>attach_file</mat-icon>
9    </button>
10    <input hidden (change)="selectFile($event)" #fileInput type="file" id="file">
11</mat-form-field>
12
13
14::::::::: AND TS ::::::
15selectFile(event) {
16    this.selectedFiles = event.target.files;
17}
18

1
2<div class="card" >
3  <div class="card-header">
4    File Upload
5  </div>
6  <div class="card-body">
7    <mat-form-field>
8  <div>
9    <mat-toolbar>
10      <!-- Display files names -->
11      <input matInput [(ngModel)]="fileAttr" readonly name="name" />
12
13      <!-- Browse Button -->
14      <button mat-flat-button color="primary">
15        Browse File
16      </button>
17    </mat-toolbar>
18
19    <!-- Fetch selected filed on change -->
20    <input type="file" #fileInput id="uploadFile" (change)="uploadFileEvt($event)" name="uploadFile" multiple="multiple"
21      accept="image/*" />
22  </div>
23</mat-form-field>
24  </div>
25
26  <div class="card-footer">
27    <div><img src="{{dataimage}}" width="300px"></div>
28  </div>
29</div>
30