useImageUpload

The useImageUpload hook provides image upload functionality, handling the complete upload pipeline. It returns basic image metadata (ID, URL, resource URL) with uploads automatically attached to the current user. This hook is the foundation for direct image storage scenarios like profile pictures, attachments, or cases where you manage image relationships and metadata yourself. For user-generated content requiring visibility controls, sharing capabilities, or content discovery features, useCreateImageContent builds on this hook to provide those higher-level abstractions.

Anchor to useImageUpload
useImageUpload()

Anchor to useImageUpload-returnsReturns

UseImageUploadReturns

uploadImage
Upload an image which will be attached to the current user.
```
(image: File) => Promise<UploadedImage[]>
```

UploadedImage

id
The ID of the uploaded image.
```
string
```
imageUrl
The URL of the uploaded image.
```
string
```
resourceUrl
The resource URL of the uploaded image.
```
string
```

Examples

tsx

import {useCallback} from 'react'

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

export default function MyComponent() {

const {uploadImage} = useImageUpload()

const handleUpload = useCallback(async () => {

const result = await uploadImage([

{

mimeType: 'image/jpeg',

uri: 'file://path/to/image.jpg',

])

console.log('Uploaded image:', result[0])

}, [uploadImage])

return <Button onClick={handleUpload}>Upload image</Button>

}