I have a mobile web page which includes an input element of type ‘file’, to allow users to upload image files to a server. The page works fine on iOS, and on a Nexus 4 (Android 4.2.1) in the Chrome Browser.
When I use a Samsung S3 (Android 4.0.4) with the default browser clicking on the ‘Choose file’ button opens the image selection dialog as expected, however after I choose an image and close the dialog the web page gets refreshed, so I lose the image that was selected. Has anyone else seen this behaviour? Any suggestions for a workaround?
The input element that I’m using is fairly standard, and looks like this:
<input id="addPhoto" type="file" accept="image/*"/>
Even without the ‘accept’ attribute I get the same problem.
Have a look a this issue:
Basically, what seems to be happening is this:
Android does not have enough memory available for the file-chooser or camera app.
It frees up memory by closing the browser
After the file chooser/camera is closed the browser is opened again, triggering a page refresh, which renders the whole file choosing exercise useless.
It seems to me that this is beyond the control of any browser based solution but I would love to be proven wrong on this assumption.
I’m having the same problem on a phone with Andriod 2.3.6. One of my colleagues does not have the problem on his phone (can’t recall what that is running). He suggested it may be a memory issue. If the phone doesn’t have enough available memory, the browser might actually be forced to reload the page after selecting the picture, which defeats the purpose. I have not yet been able to confirm that this is the problem, but my phone does have considerably less available memory than his.
You could try this JQuery Method: http://blueimp.github.com/jQuery-File-Upload/
Uploadify also looks promising: http://www.uploadify.com/
Here’s a demo of it: http://www.uploadify.com/demos/
I think the problem is not your code, but the default Android browser you are using.