How to Let Users Choose Between Photo Album and Camera

On Android devices, if you want a file input that prompts the user to either select an image from their photo album or capture a new one using their camera, you can use the capture attribute alongside the accept property. Here's an example of a file input that allows both options:

<input type="file" accept="image/*;capture=camera">

This attribute is critical for Android devices. The system will display both the image picker and the camera capture options. For iOS devices, using type="file" alone is sufficient, as iOS automatically shows both options without the need for capture=camera.

The Capture Attribute

Adding a capture attribute to a file input element allows you to specify which camera to use by default. You can set the value of capture to either "environment" (usually the rear camera) or "user" (usually the front camera).

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

In this example, the file input will open with the device's rear (environment-facing) camera preferred for capturing images.

Ensuring Compatibility Across Devices

To ensure maximum compatibility across devices and browsers, you may want to provide a fallback. Not all browsers handle the capture attribute consistently, so testing on different devices is crucial. Here is a version without the capture attribute for cases where browser support is limited:

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

This will display the default image picker on most devices, allowing the user to choose an image from their gallery. Android users will be able to access their camera through the file picker, but it won't explicitly prefer the camera capture option.