Answers for "File Upload with Angular Material"

0

File Upload with Angular Material

<mat-form-field class="columns">
    <mat-label *ngIf="selectedFiles; else newFile">{{selectedFiles.item(0).name}}</mat-label>
    <ng-template #newFile>
        <mat-label>Choose file</mat-label>
    </ng-template>
    <input matInput disabled>
    <button mat-icon-button matSuffix (click)="fileInput.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
    <input hidden (change)="selectFile($event)" #fileInput type="file" id="file">
</mat-form-field>


::::::::: AND TS ::::::
selectFile(event) {
    this.selectedFiles = event.target.files;
}
Posted by: Guest on August-21-2021
0

angular material upload file

<div class="card" >
  <div class="card-header">
    File Upload
  </div>
  <div class="card-body">
    <mat-form-field>
  <div>
    <mat-toolbar>
      <!-- Display files names -->
      <input matInput [(ngModel)]="fileAttr" readonly name="name" />

      <!-- Browse Button -->
      <button mat-flat-button color="primary">
        Browse File
      </button>
    </mat-toolbar>

    <!-- Fetch selected filed on change -->
    <input type="file" #fileInput id="uploadFile" (change)="uploadFileEvt($event)" name="uploadFile" multiple="multiple"
      accept="image/*" />
  </div>
</mat-form-field>
  </div>

  <div class="card-footer">
    <div><img src="{{dataimage}}" width="300px"></div>
  </div>
</div>
Posted by: Guest on February-24-2021

Code answers related to "File Upload with Angular Material"

Browse Popular Code Answers by Language