Last active
February 28, 2026 09:53
-
-
Save danawoodman/4788404bc620d5392d111dba98c73873 to your computer and use it in GitHub Desktop.
Revisions
-
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -11,7 +11,7 @@ camera, you'll need this basically undocumented `capture` attribute added to you 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 -
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ 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: ```html <input type="file" accept="image/*;capture=camera" /> -
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ 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 poorly documented `capture` attribute (I literally can't find docs for it anywhere) added to your input: ```html <input type="file" accept="image/*;capture=camera" /> -
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ 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 poorly documented `capture` attribute added to your input: ```html <input type="file" accept="image/*;capture=camera" /> -
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 1 addition and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,9 +2,7 @@ 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 poorly documented `capture` attributeadded to your input: ```html <input type="file" accept="image/*;capture=camera" /> -
danawoodman revised this gist
Jan 11, 2024 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -10,9 +10,11 @@ added to your input: <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. 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) -
danawoodman created this gist
Jan 11, 2024 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,26 @@ ## 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 [poorly documented `capture` attribute](https://www.w3.org/TR/html-media-capture/#the-capture-attribute) added to your input: ```html <input type="file" accept="image/*;capture=camera" /> ``` Note that 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. ### The `capture` property A final note: if you add a [`capture` property](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) to a file input, like this: ```html <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"`.