3

I'm working with Angular 5 and material library. I need to upload a file, but in the documentation, I didn't find an explanation to accomplish this task.

Is anybody that have the same need that can suggest me a good tutorial or documentation?

Tnx

xcesco
  • 4,690
  • 4
  • 34
  • 65
  • (Not using Material but it might help others: https://gist.github.com/stuartaccent/51afc6b17d89d4dc6f3968ede5d789b6 / https://stackblitz.com/edit/angular-5-file-upload-queue?file=app%2Fapp.module.ts) – Romano May 22 '18 at 18:14
  • This has been answered in a [similar question](https://stackoverflow.com/questions/31867194/file-upload-with-angular-material/67990947#67990947). You can refer to my answer there. – Owrrpon Jun 17 '21 at 08:00

2 Answers2

10

There is a nice library that handles this requirement that also follows Marerial Design. See attached link:

TeraData file-upload example

Narm
  • 10,677
  • 5
  • 41
  • 54
2

I had the same problem and I personalized a component with Angular Material without external libs and feedback with the name of the chosen file into field:

enter image description here enter image description here

HTML

<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>

TS

selectFile(event) {
    this.selectedFiles = event.target.files;
}
Rodrigo Bueno
  • 91
  • 1
  • 4