I tried to implement a nice html5 drag and drop file uploader from desktop. Everything works nice, but it does not work on mobile devices (not a surprise, as they do not have desktops). So I tried to nicely fallback on normal file uploader, when a user clicks on dropable region.
I used the only solution, I am aware of (so if you know something better, please tell me). Basically I have a dropable region and a <input type="file"> which is hidden. When I click on a region, input is called.
Cool, it works. In Ipod, Ipad, Iphone. Then I found that the problem with android (I can not use display: none, I have to use visibility : hidden).
As you can see here
<div id="dropzone"> Click </div>
<input id="file" type="file"/>
$('#dropzone').on('click', function(){
$('#file').click();
})
and on fiddle, it works fine in Android, and iOS devices, but it still fails on windows phone (Nokia Lumia 520). Does anyone know how to fix the problem.
P.S. I also see that popular library dropzone.js also does not work on windows phone, so I am almost desperate here.
I was surprised to find out that you can not upload any file on any device below Windows Phone 8.1:
File upload functions in browsers assume you have full access to the file system. With WP you do not have unfettered access to the file system on the phone.