ngf-select is not working on iphone5

Question

Here is my html

<input id="fileUploaderInput" ng-model="$ctrl.files" ng-change="$ctrl.onSelectFiles()" style="display: none" type="file"
           ngf-select multiple>

<button type="button" class="button shed-btn button-energized" ng-click="$ctrl.onClickBrowse()">Browse</button>

My js code which triggers the click event of input element on button click.

vm.onClickBrowse = function () {
      document.getElementById('fileUploaderInput').click();

    }

It is working fine on android and iphone6 but not on iphone5. Any help would be appreciated

Answer 1

Please try this solution.

a) Wrap your input inside your button

<button 
    type="button"
    class="button shed-btn button-energized upload-inp-wrapper" 
    ng-click="$ctrl.onClickBrowse()">
    Browse

    <input
        type="file"
        id="fileUploaderInput"
        ng-model="$ctrl.files"
        ng-change="$ctrl.onSelectFiles()"
        ngf-select multiple>
</button>

b) Style the elements accordingly

.upload-inp-wrapper{
    position: relative;
}

.upload-inp-wrapper input{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;   /* so it doesn't show */
    z-index: 2;   /* or whatever keeps the input above button */
}