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

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){ ... });

Answer 4

Well apparently it's JUST a jQuery thing. This page shows that it can work.

https://codepen.io/VincentBel/pen/wqQOGr

<input id="fileInput" type="file" style='display:none'/>
<button id="button" type="button" onClick="document.getElementById('fileInput').click()">trigger file selection</button>