Simulating a file input click with .click() does not work in iOS - Cordova

Question

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.)

Answer 1

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