graceful fallback to normal file uploader on mobile devices (windows mobile issue)

Question

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.

Answer 1

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.

Sourse