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 */
}

Answer 2

As a workaround you can place the input element on top of the button, so that the user will actually tap on the input element which triggers the image picker.

Html

    <button class="button button-block" 
    ngf-select="onBtnUploadClick( $files, $invalidFiles )" 
    ngf-multiple="true" ngf-max-size="10MB" 
    accept="image/*,application/pdf"> Upload Picture </button>
    <input id="ngf-uploadBtn" style="position:relative;top:-55px;left:0px;
    width:100%;visibility:visible;opacity:0.01" 
    type="file" ngf-select="onBtnUploadClick( $files, $invalidFiles )" 
    ngf-multiple="true" ngf-max-size="10MB" accept="image/*,application/pdf" 
    multiple="multiple">

There is a open issue in github follow that link for more info