HTML input type="file" not working to pull up camera for Pixel / android 14 combination

Question

I posted this in the react-native-webview discussion thread in GitHub in case this is something they need to add support for, but wanted to see if anyone had any thoughts here:

Disclaimer: I'm a web developer, not an android developer so my knowledge of all things android is shallow at best.

My team has noticed that our PWA application with a react native webview layer seems to only experience issues with an <input type='file' capture> element based camera for pixel users (at least 6 and 8) running android 14. It appears to work fine to bring up the camera for other Pixel users running 13 and below.

Is anyone aware of any reason why this method would fail on the Pixel / android 14 combination in particular? I've seen some threads that 14's SAF cracked down on access to the phone's files, which the camera would be considered with the html input type="file" element, but even if that's the case, I'm not sure what can be done on our end. Any insight would be greatly appreciated!

As a note, we're using capture('') to force open the camera and deny the photo file picker.

<input id="camera" type="file" name="picture" accept="image/*" capture={'' as any} ref={inputFileRef} onChange={(e) => handlePhotoChanges(e)} /> 

In handlePhotoChanges is a line inputFileRef.current.click() that fires but fails to open the camera.

HTML input file element docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

We have narrowed the issue down to Pixel users running android 14, but are still researching what might be particular about pixel and android 14 to cause this issue.

Vaules

Answer 1

After testing different accept and capture settings on android 14 chrome, below are my findings. It's just so weird.

1. both accept and capture are unset: can use camera or select from gallery

2. only accept is set:

• only accept image type: can only select from gallery

      // full MIME 
      <input type="file" accept="image/jpeg" />
      // file extension
      <input type="file" accept=".jpeg" />

• accept file types other than image: can use camera or select from gallery

      <input type="file" accept="image/jpeg,application/pdf" />
      <input type="file" accept=".jpeg,.pdf" />

3. only capture is set: can only use camera

      <input type="file" capture="environment"/>

4. both accept and capture are set:

• accept string is composed with file extension: can only select from gallery

      <input type="file" accept=".jpg,.jpeg" capture="environment"/>

• accept string is composed with full MIME type: can only use camera

      <input type="file" accept="image/jpg,image/jpeg" capture="environment"/>

Cohbath

Answer 2

I'm facing the same issue. Not only happening on Google Pixel phones but also on other models (e.g. Samsung Galaxy phones).

I've narrowed it down to Android 14 and Chrome. With this combination <input type="file"/> does not open camera and it only allows to pick up an image from the gallery.

When using other browser such as Firefox for Android the camera does open as expected and also shows the option to select existing image from the gallery.

As you indicated, adding capture attribute will open the camera in Chrome but it won't allow the user to select an existing image.

I found a similar question in a Chrome forum: question

It may be a recent bug in Chrome. I'll post another answer if I find more information.

Osier

thanks for the response! This was helpful. We actually did have a user successfully pull up the camera using a samsung galaxy (android 14) using chrome as the react-native-webview shell's browser engine. The shell complicates things as opposed to a simple web app, but for whatever reason it seems to work for all androids running android 14 except for Pixel (that we've so far come across). Yesterday we started looking more into permissions and whether that's the issue, but haven't tested changes yet. developer.android.com/about/versions/14/changes/… – Vaules

Oh re-reading this line, I think our goals are slightly different: "As you indicated, adding capture attribute will open the camera in Chrome but it won't allow the user to select an existing image." We've actually disabled the ability to select an existing image on purpose, so I didn't even know that was a bug in chrome. – Vaules

Agree, our scenarios are slightly different. In our case we have angular app and we want both the camera and and the gallery picker to be shown, which was the case in Chrome before Android 14. After investigating this issue further and posting my findings here I found other user asking the same question that I'm facing: #77874268. It looks like a Chrome - Android 14 bug – Osier

Answer 3

I was able to solve the problem for my case by adding these Android 14 permissions to our android manifest. Hope this helps @VinceCYLiao @xenope

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED"/>
  <!-- Camera -->
  <intent>
      <action android:name="android.media.action.IMAGE_CAPTURE" />
  </intent>
  <!-- Gallery -->
  <intent>
      <action android:name="android.intent.action.GET_CONTENT" />
  </intent>

Vaules

Answer 4

I am seeing the same issue. To me it appears to be a Chrome update. I am seeing it on Android 14 and 9. The phone with 9 was fine until I updated chrome this morning. Here is my tag running in a react pwa served through react-native-webview:

    <input
      id="add-meter-overview_take-picture"
      accept="image/*"
      capture="environment"
      onChange={onHandleCapture}
      type="file"
    />

Shoeblack