useImagePicker

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"
            />
            <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"
        />
      </>
    )
  }