using input type file with angular material 2
You need to simply trigger the click
for your file input.
<button md-mini-fab type="button" onclick="document.getElementById('fileToUpload').click()">
<label for="fileToUpload"><md-icon>add</md-icon></label>
</button>
<input id="fileToUpload" type="file" style="display:none;">
Here is a simple solution:
<button (click)="fileInput.click()">
<md-icon>library_add</md-icon>
<span>Select</span>
<input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</button>
I'm not sure about your cases, but in my Angular5 application I used this HTML structure for uploading files on server:
<label for="uploadPicture" class="upload-file">
<mat-icon>add_a_photo</mat-icon>
</label>
<input type="file"
id="uploadPicture"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg"
(change)="selectFile($event.target.files[0])">
In my case this solution working great. No need to trigger click
event, because when you click on <label>
that related to input
it's same as click
on input
.
Try this:
<input #file type="file" [hidden]="true" accept="image/*" (change)="upload(file.files)">
<button mat-button #upload (click)="file.click()">Upload file</button>
<mat-button>
is from https://material.angular.io
We are hiding the basic input button and linking the material button to the file upload.