File Upload with Angular Material

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

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.

Another example of the solution.Will look like the following

CodePen link there.

  <choose-file layout="row">    <input id="fileInput" type="file" class="ng-hide">    <md-input-container flex class="md-block">      <input type="text" ng-model="fileName" disabled>      <div class="hint">Select your file</div>    </md-input-container>    <div>      <md-button id="uploadButton" class="md-fab md-mini">        <md-icon class="material-icons">attach_file</md-icon>      </md-button>    </div>  </choose-file>   .directive('chooseFile', function() {    return {      link: function (scope, elem, attrs) {        var button = elem.find('button');        var input = angular.element(elem[0].querySelector('input#fileInput'));        button.bind('click', function() {          input[0].click();        });        input.bind('change', function(e) {          scope.$apply(function() {            var files = e.target.files;            if (files[0]) {              scope.fileName = files[0].name;            } else {              scope.fileName = null;            }          });        });      }    };  });

Hope it helps!