search

danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.59k forks source link

Select files dialog not showing up on iOS devices after update from 12.2.4 to 12.2.5 (and any newer version) #1700

Closed nikolaglumac closed 8 years ago

nikolaglumac commented 8 years ago

Hi here! First of all I would like to thank you for a truly awesome™ plugin - we use it for quite some time now and always make sure to update to the latest version. Unfortunately our latest update attempt from version 12.2.4 (which was working fine) and anything newer than this version ended up in failure :( The problem that popped out is related to iPhone (and probably all other touch devices) - the dialog to select files is simply not showing up at all. No JS errors, no nothing. The only way to get it to show up is to touch and hold the trigger element for at least one second and then release it. I have narrowed down potential cause for such behaviour and it seems to be related to your fix which was introduced in version 12.2.5: https://github.com/danialfarid/ng-file-upload/commit/93ce694cd8badb5774aa5787146bdf7d9556edee - this was a fix for: https://github.com/danialfarid/ng-file-upload/issues/1676 I believe that your code which prevents triggering select-file dialog on scroll actually kills it also for fast (normal) tap on touch devices. This issue is a show-stopper for us so any help/advice is welcomed!

Thanks a lot in advance!

Cheers ;)

danialfarid commented 8 years ago

Can you reproduce it on the demo page?

danialfarid commented 8 years ago

The demo page seems to work fine on my iPhone 6 chrome. Which iOS device are you referring to?

nikolaglumac commented 8 years ago

Hi @danialfarid! Thanks for the fast reply! I can confirm that demo page works fine for me too. The setup is the same as yours - iPhone 6 with latest Chrome. Maybe something is wrong with our implementation?

<div ngf-select="uploadImage($files, $invalidFiles)" ngf-multiple="false" ngf-capture="'camera'" ngf-accept="'image/*'" ngf-max-width="8192" ngf-max-height="8192" ngf-max-size="10MB" ngf-fix-orientation="true" style="">Upload</div>

But than again it is really strange that it works with version 12.2.4 :-/

Thanks!

nikolaglumac commented 8 years ago

BTW. we are using Hammer.JS and FastClick but that should make no difference...

danialfarid commented 8 years ago

It is probably a conflict with another library or you might have a special listener for touch or click events. Try removing FastClick or similar dependencies and see if it works. That way we can narrow down the issue. You can also put breakpoints or console.log at the lines that handle the touch to figure out why it is being cancelled.

nikolaglumac commented 8 years ago

Will do! I will post my findings here ;) Thanks for your time!

nikolaglumac commented 8 years ago

It is confirmed. The problem is FastClick. When I remove it ng-file-uploader works as expected. Perhaps this incompatibility could be noted somewhere? I will definitely try to find a way to get those two to work together again ;)

nikolaglumac commented 8 years ago

For future readers - the workaround is to add needsclick class to the ng-file-uploader DOM node which disables FastClick for this element (as noted in FastClick docs: https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick)

Thanks for the help once again ;)

Cheers!