WebKit on iOS ignores trigger('click') on file input

mobile
1

Apparently the latest mobile Safari changed a lot of things breaking web apps that used to work fine before.

  • navigator.geolocation.getCurrentPosition no longer works unless the site is HTTPS and has no mixed content (images with HTTP src)
  • I can no longer trigger a click event on a hidden <input type="file">

The trigger click is unfortunate since I have not been able to find a workaround. Does anybody know how to deal with this?

The following works on the desktop but not on iOS

<template name="example">
 <form>
  <input type="file" id="file-upload">
  <button>Select File</button>
 </form>
</template>

Template.example.events({
 'click button': function(e,t) {
   t.$('#file-upload').trigger('click');
 }
})
2

There’s a simple workaround. Place the <input type="file"> with CSS (using absolute positioning or whatever suits you) on top of your button with these rules “display: block; opacity: 0”. Then you don’t have to resort to trigger('click') hack, because the input will be pressed by the user.

2 Likes
3

You are a saint :slight_smile:

4

Sorry, it’s not visibility: hidden but actually opacity: 0 (I’ve edited the post above). Also, make sure to set the width and height of the input to match your button :slight_smile:.