Estoy usando React para crear una aplicación web empaquetada con Cordova para que sea una aplicación nativa en Android/iOS. Tengo problemas específicamente con iOS, específicamente con la simulación de un clic en una entrada de archivo con .click()
Estoy usando esta biblioteca: https://github.com/odysseyscience/react-s3-uploader
Aquí está mi código, muy simple:
<button onClick={(e) => { e.preventDefault() $('#fileinput').click() }} className='btn btn--no-bg btn--w-icon uploader'>
El elemento con id fileinput es una versión renderizada del cargador de reacción, pero en HTML simple se ve así:
<input type="file" id="fileinput" class="hidden react-s3" accept="image/*">
He realizado un montón de pruebas y el problema está ocurriendo en el evento jquery .click() . El primer onClick definitivamente se activa, pero no sucede nada (en iOS) cuando se llama a $('#fileinput').click() .
Esta parte del código funciona tanto en un navegador web como en mi simulador de Android, pero una vez más, no en mi simulador de iOS.
Cuando entro en la consola para los tres entornos (escritorio, iOS, Android) y ejecuto el código $('#fileinput').click() en la consola, se hace clic en la entrada y se activa la selección de fotos para Android y escritorio, pero no hace nada en iOS.
Investigué mucho, algunas soluciones que encontré que no funcionan son: agregar pointer: cursor al botón o a la entrada, cambiar el button a a etiqueta, cambiar display:none a visibility: hidden en la entrada oculta, y probando todas las versiones diferentes de .click() que pude encontrar (vanillaJS, .trigger , .touchstart , .touchend , .live , etc.)
Tuve el mismo problema y esto funcionó:
$('#fileinput').trigger("click");y no oculte la entrada del archivo, pero css fuera de la pantalla como:
#fileinput { position:absolute; top:-9999px; }No creo que puedas activar clics en un elemento oculto en iOS
Yo suelo:
document.getElementById("fileinput").discpatchEvent(new Event("click"))