Why doesn't iPhone's Safari trigger changed event on input type=file?

Question

There is an iPhone and need to catch change event on a hidden input. When opened at PC, it works, I see changed text. In case I open it on an iPhone it doesn't work as expected, I just see open dialog.

Simple jsfiddle demonstrates this.

<input type=file style="display:none" id=file>
<button type=button id=but>open</button>

<div id=out>
</div>

And

$(document).ready(function(){
  $('#but').on('click touchend', function(){
    $('#out').text('open dialog'); 
    $('#file').click();
  });
  $('#file').on('change', function(evt) {
    $('#out').text('changed');
  });
});

What's wrong with it? Is it a new bug of iOs? Afaik, it worked just a month ago.

I tried to replace hidden with opacity:0, it works for simple jsfiddle, but doesn't work in complex project with hiding sidebar. The question is the following. How to make a simple fix and what has changed recently (some Safari update?), that caused the change of hidden input behaviour?

Answer 1

you can use for property of label. the following code may be helpful for you:

$('#file').on('change', function () {
  $('.button').text('changed')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' style='display:none' id='file'>
<label for='file' class='button'>open</label>

using label, you can use custom style for your upload button

However, in some mobile browsers, when you upload file again, if the file is same with before, it won't trigger change event, you use reset method of form to clear file:

 $('#file').on('change', function () {
      $('.form')[0].reset()
      $('.button').text('changed')
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='form'>
  <input type='file' style='display:none' id='file'>
    <label for='file' class='button'>open</label>
</form>