use
hook
The hook provides functionality for uploading images attached to the current user. It handles the upload process, including getting upload links, uploading to storage, and polling for completion.
Anchor to useImageUploaduse
use
- uploadImage(image: File) => Promise<UploadedImage[]>
Upload an image which will be attached to the current user.
UseImageUploadReturns
UseImageUploadReturns
UseImageUploadGeneratedType
UseImageUploadReturnsuseImageUpload = (): UseImageUploadReturns => {
const {createImageUploadLink, completeImageUpload} = useShopActions()
const uploadImage = useCallback(
async (image: File) => {
const processedImageParams = await processFileData(image)
const links = await createImageUploadLink({
input: [
{
mimeType: processedImageParams.mimeType,
fileSize: processedImageParams.fileSize,
},
],
})
if (!links.ok) {
throw new Error(links.error.message)
}
// Upload single file to GCS
const {error: uploadError} = await uploadFileToGCS(
processedImageParams,
links?.data?.targets?.[0]!
)
if (uploadError) {
throw new Error(uploadError)
}
// 10 second polling for image upload
let count = 0
while (count < 30) {
const result = await completeImageUpload({
resourceUrls:
links?.data?.targets?.map(target => target.resourceUrl) || [],
})
if (!result.ok) {
throw new Error(result.error.message)
}
if (result.data?.files?.[0]?.fileStatus === 'READY') {
return [
{
id: result.data.files[0].id,
imageUrl: result.data.files[0].image?.url,
resourceUrl: links?.data?.targets?.[0]?.resourceUrl,
},
]
}
await new Promise(resolve => setTimeout(resolve, 1000))
count++
}
throw new Error('Image upload completion timed out')
},
[createImageUploadLink, completeImageUpload]
)
return {
uploadImage,
}
}UseImageUploadReturns
- uploadImage
Upload an image which will be attached to the current user.
(image: File) => Promise<UploadedImage[]>
interface UseImageUploadReturns {
/**
* Upload an image which will be attached to the current user.
*/
uploadImage: (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
export interface UploadedImage {
/**
* The ID of the uploaded image.
*/
id: string
/**
* The URL of the uploaded image.
*/
imageUrl?: string
/**
* The resource URL of the uploaded image.
*/
resourceUrl?: string
}Was this section helpful?
Example code
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>
}
examples
Example code
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> }