Safari en iOS 9 no activa el evento de clic en el file de input oculto

Tengo un website con un campo de carga, pero la input se oculta con la display: none; y tengo un div para llamar a esta acción.

Funcionó en iOS 8, pero ahora después de la actualización de iOS 9, no sucede nada cuando toco en el div.

He intentado usar el [0].click() o VanillaJS puro como document.getElementById('file_input').click() y nada funciona.

Todos estos methods funcionan entre iOS 5 y iOS 8.

Si lo desea, enlace a este ejemplo en JSFiddle: https://jsfiddle.net/o1r265tz/6/embedded/result/

 $(document).ready(function(){ $(document).on('click touchstart', '.upload-box', function(e){ e.stopPropagation(); $('.form-upload input.file-input').trigger('click'); $('.debug').append('<p>Clicked!</p>'); console.log('Clicked!'); return false; }); }); 
 .upload-box { border: 3px solid #999; padding: 10px; text-align: center; border-radius: 5px; font-size: 35pt; font-family: Arial; color: #555; } .form-upload { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="upload-box">Click here to upload =D</div> <form class="form-upload" enctype="multipart/form-data"> <input class="file-input" id="file_input" type="file"> </form> <div class="debug"></div> 

Tres cosas están causando este problema:

  1. En javascript, eliminar return false; de escucha de events.

  2. En la hoja de estilo, el elemento que llama a la acción debe tener el cursor: pointer; propiedad cursor: pointer; . Probablemente Apple puso este requisito en estas llamadas para get la mejor respuesta en la interfaz del usuario.

  3. Nuevamente en la hoja de estilo, no podemos configurar la display: none; para la input oculta porque algunos browseres no aceptan clics en elementos que no se muestran.

Enlace a ejemplo fijo en JSFiddle

Poniendo <input type="file"/> encima del button falso con la position: absolute y opacity: 0 funciona. También es posible que necesite establecer el índice z correcto y hacer que la input sea 100% ancho y alto, por lo que puede hacer clic en la parte superior del button.

Fuente: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828

Intente eliminar el evento touchstart del file JS o reemplácelo por el evento mousedown .

 $(document).on('click', '.upload-box', function(e){ ... });