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.

It worked on iOS 8, but now after the iOS 9 update, nothing happens when I touch in the div.

I've tried using the [0].click() or pure VanillaJS like document.getElementById('file_input').click() and nothing works.

All these methods work between iOS 5 and iOS 8.

If you want, link to this example on JSFiddle: https://jsfiddle.net/o1r265tz/6/embedded/result/

$(document).ready(function(){

  $(document).on('click touchstart', '.upload-box', function(e){
    e.stopPropagation();
    $('.form-upload input.file-input').trigger('click');

    $('.debug').append('<p>Clicked!</p>');
    console.log('Clicked!');
    return false;
  });

});

.upload-box {
  border: 3px solid #999;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  font-size: 35pt;
  font-family: Arial;
  color: #555;
}
.form-upload {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upload-box">Click here to upload =D</div>

<form class="form-upload" enctype="multipart/form-data">
  <input class="file-input" id="file_input" type="file">
</form>

<div class="debug"></div>

Answer 1

Three things are causing this problem:

1. At javascript, removing return false; of 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 user interface.

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

Link to fixed example on JSFiddle

Answer 2

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

Answer 3

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

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