useImagePicker

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

Anchor to useImagePicker
useImagePicker()

Anchor to useImagePicker-returnsReturns

UseImagePickerReturns

openCamera

Opens the camera to take a photo.

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

openGallery
Opens the gallery to select an image.
```
(params?: OpenGalleryParams) => Promise<File>
```

OpenCameraParams

cameraFacing
```
CameraFacing
```
customQuality
```
CustomImageQuality
```
quality
```
ImageQuality
```

CameraFacing

'front' | 'back'

CustomImageQuality

compression
```
number
```
size
```
number
```

ImageQuality

'low' | 'medium' | 'high' | 'original'

OpenGalleryParams

customQuality
```
CustomImageQuality
```
quality
```
ImageQuality
```

Examples

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"

Clear

</Button>

</div>

</>

)}

{/* Image component also supports regular src for remote images */}