I am using React to build a web-app wrapped with Cordova to be a native app on android/iOS. I am having trouble with specifically iOS, specifically with simulating a click on a file input with .click()
I am using this library: https://github.com/odysseyscience/react-s3-uploader
Here is my code, very simple:
<button onClick={(e) => {
e.preventDefault()
$('#fileinput').click()
}} className='btn btn--no-bg btn--w-icon uploader'>
The element with id fileinput is a rendered version of the react uploader, but in plain HTML looks like this:
<input type="file" id="fileinput" class="hidden react-s3" accept="image/*">
I have done a bunch of testing and the problem is occuring in the .click() jquery event. The first onClick is definitely being triggered, but nothing happens (in iOS) when $('#fileinput').click() is called.
This portion of code works in a web browser as well as in my android simulator, but once again not in my iOS simulator.
When I go into the console for all three environments (desktop, iOS, android), and run the code $('#fileinput').click() in the console, the input is clicked and the photo selection is triggered for android and desktop, but does nothing on iOS.
Ive done a bunch of research, a few solutions I found that dont work are: adding pointer: cursor to either the button or the input, changing the button to an a tag, changing display:none to visibility: hidden on the hidden input, and trying all different versions of .click() i could find (vanillaJS, .trigger, .touchstart, .touchend, .live, etc.)
I had the same issue and this worked:
$('#fileinput').trigger("click");
and don't hide the file input but css it off screen like:
#fileinput {
position:absolute;
top:-9999px;
}
I don't think you can trigger clicks on a hidden element in iOS
I use:
document.getElementById("fileinput").discpatchEvent(new Event("click"))