3

I have a fairly common file input field on my website, to upload pictures:

<input name="photos" type="file" accept="image/*"/>

On dekstop, it works normally. On mobile, if I select an already existing picture from my gallery, it works normally, but if I choose to take a picture with the Camera, it switches to the Camera, I take the picture and, when I confirm it in Camera app, it goes back to browser, but it refreshes the page, and the photo won't go. The input will be empty.

Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86
  • 3
    There's a similar question here on Stackoverflow, but with no solution for more than 2 years: http://stackoverflow.com/questions/14274727/android-browser-refreshes-page-after-selecting-file-via-input-element – Lucas Bustamante Jul 04 '16 at 19:49
  • I have the same issue - but it refresh by uploading any picture. I tried all solutions here but nothing worked. So I had to raise a new question on that where I did put the attributes suggested here in testing inputs but none seems to work: https://stackoverflow.com/questions/73753437/instagram-embedded-browser-refreshes-page-after-uploading-a-picture-which-is-lo Did you found a solution for this already? – Sebastian Voráč MSc. Sep 17 '22 at 08:58
  • @SebastianVoráč Coming back to this question 6 years later, I don't remember how/if I solved this at all back then. I think it might be related to the memory allocation to the browser tab in mobile. Try to upload a small picture (200kb~) and see if it goes through. If it does, I'd use a JavaScript library that runs on the client side to reduce the image size before uploading it. – Lucas Bustamante Sep 18 '22 at 13:31

2 Answers2

3

Adding capture partially solves it.

<input name="photos" type="file" capture="environment" accept="image/*"/>

The only problem now is that user can't select from previously existing photos.

Coming back to this question 6 years later

It seems this is related to Android Memory Management:

  • Browser launches camera app
  • Camera app becomes foreground, browser becomes background process
  • Android, at an O.S level, frees up browser memory
  • After the camera is closed, the browser comes to foreground again, triggering a page refresh.

From Android Memory Management:

When users switch between apps, Android keeps apps that are not foreground—that is, not visible to the user or running a foreground service like music playback— in a cache. For example, when a user first launches an app, a process is created for it; but when the user leaves the app, that process does not quit. The system keeps the process cached. If the user later returns to the app, the system reuses the process, thereby making the app switching faster.

If your app has a cached process and it retains resources that it currently does not need, then your app—even while the user is not using it— affects the system's overall performance. As the system runs low on resources like memory, it kills processes in the cache. The system also accounts for processes that hold onto the most memory and can terminate them to free up RAM.

Note: The less memory your app consumes while in the cache, the better its chances are not to be killed and to be able to quickly resume. However, depending on instantanous system requirements, it's possible for cached processes to be terminated at any time no matter their resource utilization.

The reason why capture works is that it probably keeps the browser process in the foreground?

So I would personally have two buttons, one for choosing existing files, and another for using the camera:

<p>
  <label for="cameraFile">Take a picture:</label>
  <!-- Set "capture" to "user" to start frontal camera. -->
  <input name="cameraFile" type="file" capture="environment" accept="image/*"/>
</p>
<p>
  <label for="storageFile">Choose existing file:</label>
  <input name="storageFile" type="file" accept="image/*"/>
</p>
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86
  • but what about a simple script, not from inside Wordpress. What would one do to keep the picture "there" once it was taken with the camera, in other words that the browser would not refresh after that...? – Adrian Tanase Aug 23 '17 at 14:12
  • `The only problem now is that user can't select from previously existing photos` that is the problem, in 90% of cases you want your users to upload existing photos, rarely someone uploading just taken photos that is only case of BeReal or some ID validation or Credit card scan. – Sebastian Voráč MSc. Mar 26 '23 at 17:17
1

Adding attribute capture without value!

<input name="photos" type="file" capture accept="image/*"/>
Леонид Шишкин
  • 11
  • 1