Home » Android » mobile website – Android browser refreshes page after selecting file via input element

mobile website – Android browser refreshes page after selecting file via input element

Posted by: admin April 23, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Answer:

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.

Answer:

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.