FNG-select ne fonctionne pas sur iPhone5

Question

Voici mon 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> 

Mon code js qui déclenche l'événement click de l'élément d'entrée sur le bouton clic.

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

    } 

Il fonctionne très bien sur android et iphone6 ​​mais pas sur iphone5. Toute aide serait la bienvenue

Answer 1

S'il vous plaît essayer cette solution.

a) Enveloppez votre entrée dans votre bouton

<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 les éléments en conséquence

.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

Pour contourner ce problème, vous pouvez placer l'élément d'entrée au-dessus du bouton, de sorte que l'utilisateur tapera sur l'élément d'entrée qui déclenche le sélecteur d'image.

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"> 

Il y a une question ouverte à github suivre ce lien pour plus d'informations