File Upload with Angular Material

Question

I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material design, but I need it in my app)

Do you have a good solution for this problem?

Answer 1

Nice solution by leocaseiro

<input class="ng-hide" id="input-file-id" multiple type="file" /> <label for="input-file-id" class="md-button md-raised md-primary">Choose Files</label> 

View in codepen

Answer 2

For Angular 6+:

HTML:

<input #csvInput hidden="true" type="file" onclick="this.value=null" (change)="csvInputChange($event)" accept=".csv"/> <button mat-flat-button color="primary" (click)="csvInput.click()">Choose Spreadsheet File (CSV)</button> 

Component method:

  csvInputChange(fileInputEvent: any) {     console.log(fileInputEvent.target.files[0]);   } 

Note: This filters to just allow .csv files.