---
title: useImagePicker
description: >-
  The `useImagePicker` hook provides access to camera and gallery functionality
  for selecting images.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useimagepicker'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useimagepicker.md'
---

# use​Image​Picker

The `useImagePicker` hook provides access to camera and gallery functionality for selecting images.

## use​Image​Picker()

### Returns

* **UseImagePickerReturns**

  ### ### UseImagePickerReturns

  * **openCamera**

    **(params?: OpenCameraParams) => Promise\<File>**

    Opens the camera to take a photo.

  * **openGallery**

    **(params?: OpenGalleryParams) => Promise\<File>**

    Opens the gallery to select an image.

### UseImagePickerReturns

* openCamera

  Opens the camera to take a photo.

  ```ts
  (params?: OpenCameraParams) => Promise<File>
  ```

* openGallery

  Opens the gallery to select an image.

  ```ts
  (params?: OpenGalleryParams) => Promise<File>
  ```

### OpenCameraParams

* cameraFacing

  ```ts
  CameraFacing
  ```

* customQuality

  ```ts
  CustomImageQuality
  ```

* quality

  ```ts
  ImageQuality
  ```

### CameraFacing

```ts
'front' | 'back'
```

### CustomImageQuality

* compression

  ```ts
  number
  ```

* size

  ```ts
  number
  ```

### ImageQuality

```ts
'low' | 'medium' | 'high' | 'original'
```

### OpenGalleryParams

* customQuality

  ```ts
  CustomImageQuality
  ```

* quality

  ```ts
  ImageQuality
  ```

Examples

### Examples

* #### Example code

  ##### Default

  ```tsx
  import {useState} from 'react'

  import {useImagePicker, Button, Image} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {openCamera, openGallery} = useImagePicker()
    const [selectedFile, setSelectedFile] = useState<File | null>(null)

    const handleCameraCapture = async () => {
      try {
        const file = await openCamera('front')
        setSelectedFile(file)
        console.log('Captured file:', file.name, file.size)
      } catch (error) {
        console.error('Failed to capture image:', error)
      }
    }

    const handleGallerySelect = async () => {
      try {
        const file = await openGallery()
        setSelectedFile(file)
        console.log('Selected file:', file.name, file.size)
      } catch (error) {
        console.error('Failed to select image:', error)
      }
    }

    const clearImage = () => {
      setSelectedFile(null)
    }

    return (
      <>
        <Button onClick={handleCameraCapture}>Open Camera</Button>
        <Button onClick={handleGallerySelect}>Open Gallery</Button>

        {selectedFile && (
          <>
            {/* Image component handles blob URL creation and cleanup automatically */}
            <Image
              file={selectedFile}
              alt="Selected image"
              className="w-full max-w-md mt-4"
            />
            <div className="mt-2 space-x-2">
              <Button onClick={clearImage} variant="secondary">
                Clear
              </Button>
            </div>
          </>
        )}

        {/* Image component also supports regular src for remote images */}
        <Image
          src="https://example.com/image.jpg"
          alt="Remote image"
          className="w-full max-w-md mt-4"
        />
      </>
    )
  }
  ```