How to create a custom file input in Ionic 2+ with a button styling?
You can't trigger the click on a file input on iOS. A workaround is to use css to set the opacity of the input element to 0, and place it just on top of the button. That way, the file input won't be seen, but it will be clicked when clicking the button.
<ion-item>
<label>{{label}}</label>
<input type="file" (change)="fileUpload($event)" id="file-input" style="opacity: 0" #fileInp>
<button ion-button (click)="onClick()">Upload</button>
</ion-item>
and then in the .scss file:
#file-input {
opacity: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
z-index: 999;
}
There're probably some other ways to fix this issue, but that's how I managed on an app I worked on in the past.