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:
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.
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.
Related
I'm working on a Squarespace website (I can't post the link because of privacy reasons). I'm adding an announcement bar to the site, for covid info. It works fine almost everywhere, except on chrome in android. On that browser, when the page is first loaded, the very top of the text is cut off. Here's an image:
Image of bar cut off. (sorry it isn't a screenshot my phone won't take screenshots in incognito and it was in incognito for unrelated reasons).
Chrome won't allow me to scroll up anymore, which would correct the issue. When I reload the page, it starts off looking the same. However, I now I do have the ability to scroll up.
I've attempted a couple of solutions. Firstly, I've tried to set the z index of the bar higher. But that didn't help. I've also tried to add a script which automatically scrolls the user to the top using window.scrollTo(0, 0); but that also failed.
Sorry I can't show code, it's a Squarespace site. I hope someone can help. Thanks.
Edit: I've done some checking and it happens on computer chrome too when I make the screen small enough, but NOT when I switch "devices" in inspect element. However, the problem isn't there on iphone. Chrome on iphone uses webkit, while on other devices it uses Blink, so I think Blink may be the source of the issue
PWA standalone single-page app, running Chrome 79 on Android.
Comes up standalone, no problem. In one section I have a tag to get an image from the device library.
<input id="get-image" type="file" accept="image/*" >
I tap on "Choose File" to select a file (which works fine), and come back (with or without a picture). Upon return the app is no longer standalone, but appears to be in a Chrome custom tab. The only way I can return to standalone is to refresh, which would be a bad thing in this context. I can switch to fullscreen, but not standalone (the device header bar goes away in fullscreen, also bad).
There was a similar issue related to third party logins, which was fixed, reappeared and supposedly to be fixed again (I added a comment there).Standalone PWA breaks login
Since the app is a single page app, chrome is returning to the start url, which is in the scope (from the manifest), so it should return to standalone. So I'm a bit stumped.
This seems like a chrome issue, but I'd love it if there's a workaround.
I have an application that uses some regular HTML selects to get user information. Occasionally, when using it with Android stock browser, the selects will just stop working. When I click on them, the browser shows them receiving focus, but the options don't appear for me to select. Once this happens, it seems to break all selects that I access on that tab, even on other websites (including Amazon). If I open another tab, selects are working fine, so the problem seems to be limited to the one tab.
Has anyone experienced something similar, or is there perhaps a work-around that I'm not thinking of?
I could try replacing the selects with a custom control, but this would be a lot of work to do across all applications on my site, and I don't see it being that valuable for such a sporadic problem on one browser.
I have the strangest thing happening with my web application today. When I want to take a picture from my Android browser or Chrome, it throws away the whole page with this error:
Unable to complete previous operation due to low memory
I use:
<input type="file" accept="image/*" capture="camera" name="file" id="file" />
And then I take the picture, tap "save" and then everything is gone. My phone has enough memory to save the picture and everything, but still the error is displayed.
How to solve this problem?
Ok I managed to solve my own issue. I always received the following message:
unable to complete previous operation due to low memory
On my android device I activated developer options (by tapping the build version 3-5 time I think). And then in Developers Options I ticked "Do not keep activities". Now that was my problem. If I really think about it, it makes sense. When I open my camera from my browser to take a picture, it basically leaves the page (which is stupid from the developers because I did not close the browser) and that made the problem.
So by remove the tick from "Do not keep activities" I solved the problem. Hope this can help someone in the future.
is it possible to tell a mobile browser, that as long as a certain HTML page is displayed, the device should not turn off its screen?
I want to build something like Project Blinkenlights, but every participant brings his/her own pixel. To set each display to a certain color at a given point in time is managable, just let each one open a website that shows a blank page and changes the background to color the screen. I'd use JavaScript to link the devices and have them log into a control server. But having the pixels wink out because the devices go to sleep would somehow break the concept.
A dedicated app would be overkill, and not every passing onlooker would install an app anyway (at least I wouldn't).
Thanks in advance!
I'm pretty sure you can't do that without bundle your webview inside an app. And whatever is the OS. It's all about protecting the user (and his device battery)