Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save danawoodman/4788404bc620d5392d111dba98c73873 to your computer and use it in GitHub Desktop.

Select an option

Save danawoodman/4788404bc620d5392d111dba98c73873 to your computer and use it in GitHub Desktop.

Revisions

  1. danawoodman revised this gist Jan 11, 2024. 1 changed file with 1 addition and 1 deletion.
    Original 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.

    This attribute only does anything on mobile operating systems, this won't change the behavior of your inputs for desktop clients.
    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

  2. danawoodman revised this gist Jan 11, 2024. 1 changed file with 1 addition and 1 deletion.
    Original 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:
    camera, you'll need this basically undocumented `capture` attribute added to your input's `accept` property:

    ```html
    <input type="file" accept="image/*;capture=camera" />
  3. danawoodman revised this gist Jan 11, 2024. 1 changed file with 1 addition and 1 deletion.
    Original 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:
    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" />
  4. danawoodman revised this gist Jan 11, 2024. 1 changed file with 1 addition and 1 deletion.
    Original 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` attributeadded to your input:
    camera, you'll need this poorly documented `capture` attribute added to your input:

    ```html
    <input type="file" accept="image/*;capture=camera" />
  5. danawoodman revised this gist Jan 11, 2024. 1 changed file with 1 addition and 3 deletions.
    Original 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` attribute](https://www.w3.org/TR/html-media-capture/#the-capture-attribute)
    added to your input:
    camera, you'll need this poorly documented `capture` attributeadded to your input:

    ```html
    <input type="file" accept="image/*;capture=camera" />
  6. danawoodman revised this gist Jan 11, 2024. 1 changed file with 3 additions and 1 deletion.
    Original file line number Diff line number Diff line change
    @@ -10,9 +10,11 @@ added to your input:
    <input type="file" accept="image/*;capture=camera" />
    ```

    Note that on iOS, the operating system will always show an image picker and the 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)
  7. danawoodman created this gist Jan 11, 2024.
    26 changes: 26 additions & 0 deletions How to allow the file picker AND camera capture on Android.md
    Original 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"`.