React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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" />
    1. only capture is set: can only use camera
          <input type="file" capture="environment"/>
    1. 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"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search