Android browser refreshes page after selecting file via input element

Question

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.

i have same problem. When i select a file and close the dialog box page gets refreshed but if i select again it works. I don't what is the problem with androids default browser. It works fine in Opera Mobile and Chrome — Jitesh Tukadiya, Mar 08 '13 at 05:12

score 25 · Accepted Answer · edited Jun 22 '13 at 12:18

25

Have a look a this issue:

https://code.google.com/p/android/issues/detail?id=53088

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.

edited Jun 22 '13 at 12:18

codebox

19,927
9
63
81

answered May 15 '13 at 14:39

Douwe

557
7
16

* did you find any solution for this problem?? * I tested in m.facebook.com, it works fine. Any idea on what facebook did to fix this issue? – Shakti Shrestha Jun 02 '14 at 06:43
Yes , it's os based. Tested Chrome , FF etc. on 1GB RAM device and all browsers are doing the same thing.. Chrome gives you even RAM alert but still no fix :( – zzart Jul 04 '14 at 08:51
Just wondering has anyone found a solution to this yet? I can see you can upload images on http://www.putmeinthestory.com/personalized-books/a-halloween-scare-at-my-house.html without it refreshing the page, so there must be a workaround – Adrian Oct 09 '14 at 10:09

score 2 · Answer 2 · answered Jan 28 '13 at 21:40

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.

score -8 · Answer 3 · answered Jan 14 '13 at 18:19

-8

You could try this JQuery Method: http://blueimp.github.com/jQuery-File-Upload/

It looks nice too

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.

answered Jan 14 '13 at 18:19

turnt

3,235
5
23
39

Do you know if these libraries address the particular issue described in the question? – codebox Jan 21 '13 at 15:38
See comment in Alpay's answer (blueimp does not fix the issue) – codebox Jan 22 '13 at 15:17
I've seen the problem with jQuery File Upload and with Plupload, although the jQuery UI widget for Plupload seems to be doing it the least. – Sabrina Leggett Jun 23 '13 at 09:27
this reply is completely OT – gru Nov 15 '13 at 17:03
Comment is off topic. – Philipp Rieber Oct 14 '14 at 08:42
LOL where this reply come from – Lucas Veiga Aug 01 '16 at 19:36

Android browser refreshes page after selecting file via input element

3 Answers3

Linked