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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With