vaadin/vaadin-upload

Add files/File upload button not working on iOS/Safari

doughaase opened this issue · 5 comments

When I tap the add files/upload button, everything work as expected on Android/Chrome. It prompts the user to choose the files from camera or system folders.

When I'm running it on mobile Safari though, it only works if I'm accessing the page like a website... if add it to the homescreen (to have the progressive web app behaviour), the button doesn't work. I tap it and although the function _onAddFilesClick is being called, nothing happens afterwards. There's no prompt, so the _onFileInputChange function is not being called.

vaadin-upload 1.1.4
polymer 1.6.0

Another weird behaviour happening with Safari:

  • If accessing like a web app, it calls _onAddFilesClick twice, both times evaluating to true on Polymer.Gestures.resetMouseCanceller condition.
  • If accessing like a page, it calls _onAddFilesClick only once (correct behaviour).

I changed on-tap to on-click on the addFiles paper-button and it worked.

It seems to me that the whole purpose of on-tap is to work consistently. Is this something the polymer team should know about?

https://www.polymer-project.org/1.0/docs/devguide/events

Tip: Use on-tap rather than on-click for an event that fires consistently across both touch (mobile) and click (desktop) devices.

@davidmaxwaterman click works on both kinds of devices also.

It was an issue a few years back with the click that touch devices made a 300ms delay. So tap was introduced as a click alternative without such a delay.

Nowadays this is no longer an issue to use just click, as on touch devices they have removed the click delay on every page that has responsive meta viewport tag (most mobile “webapp” pages do).

We can safely change to on-click in <vaadin-upload>, and it would be even more reliable than on-tap, I believe.

Maybe related to: #145