Safari on iOS 9 does not trigger click event on hidden input file

Question

I have a website with an upload field, but the input is hidden with display: none; and I have a div for calling this action.

I

Answer 1

Three things are causing this problem:

1. At javascript, removing return false; of the event listener.

2. At the stylesheet, the element which calls the action must have the property cursor: pointer;. Probably Apple put this requirement in these calls for best feedback on a user interface.

3. Again at the stylesheet, we can't set display: none; for hidden input because some browsers don't accept clicks on elements that aren't displayed.

Link to a fixed example on JSFiddle

Answer 2

Try to remove touchstart event from JS file or replace it with mousedown event.

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

Answer 3

Putting the <input type="file"/> on top of the fake button with position: absolute and opacity: 0 works. You might also need to set the correct z-index and make the input 100% width and height so it catches the click on top of the button.

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