Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save danawoodman/4788404bc620d5392d111dba98c73873 to your computer and use it in GitHub Desktop.
Save danawoodman/4788404bc620d5392d111dba98c73873 to your computer and use it in GitHub Desktop.
How to allow the file picker AND camera capture on Android

Allow photo album AND the camera

On Android devices, if you want to create a file input that prompts the user to either choose an image from their photo album or take a picture with their camera, you'll need this basically undocumented capture attribute added to your input's accept property:

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

On iOS, the operating system will always show an image picker and the camera with a type="file" input even if it doesn't have the ;capture=camera directive.

Also note, this attribute only does anything on mobile operating systems, this won't change the behavior of your inputs for desktop clients.

The capture property

A final note: if you add a capture property to a file input, like this:

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

...this tells the browser to prefer camera capture over an image picker. The values can be "environment" or "user".

@tyrex1975
Copy link

Thank you for this.

It's a real pain when the underlying behaviour of standard HTML elements gets altered in different browsers. Especially when most of my apps are PWA based, necessitating a new release via a service worker update.

@danawoodman
Copy link
Author

Glad it helped!

@dpaola2
Copy link

dpaola2 commented Jan 31, 2025

Thank you for this!

@danawoodman
Copy link
Author

Thank you for this!

of course, happy it was useful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment