File input programmatic click in Framework7

Question

I have several file inputs in my html5 app which should be opened by clicking on some design elements. For this I use the following JQuery code:

$('.btn').on('click', function() { $('#file-input').click(); });

This code works perfectly in desktop browsers, but silently fails in mobile browsers. Even more confusing is that it actually works sometimes, when making big amount of taps (20-30). The other thing is that I'm using Framework7. After some tests I've found that if I comment Framework7 initialization, that the previous code works fine in mobile browsers. So my guess is that F7 somehow intercepts all page clicks to make some processing and use its own built in DOM7 dom library, which click implementation fails on file-input for security reasons. I shall be grateful for any help. Maybe someone familiar with F7 can explain this. Or maybe I'm digging in the completely wrong direction..

You can not use file input in Cordova/Phonegap app, please see [this question](http://stackoverflow.com/questions/17439220/how-to-use-input-type-file-in-phonegap). — Andrei Belokopytov, Dec 07 '15 at 18:38
@AndreiBelokopytov , it's a web application, not Cordova/Phonegap. — kamuniaft, Dec 09 '15 at 05:33

score 2 · Answer 1 · answered Dec 09 '15 at 05:48

I've failed to find the root of my problem here, but I've found a workaround some time ago. I've refused from using programmatic clicks and instead made design elements as lables, like

<label for="hiddenInputId" class="myDesign"></label>

This approach works for me.

File input programmatic click in Framework7

1 Answers1