---
title: useImageUpload
description: >-
  The useImageUpload hook provides image upload functionality, handling the
  complete upload pipeline.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/storage/useimageupload'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/storage/useimageupload.md'
---

# 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.

## use​Image​Upload()

### Returns

* **UseImageUploadReturns**

### UseImageUploadReturns

* uploadImage

  Upload an image which will be attached to the current user.

  ```ts
  (image: File) => Promise<UploadedImage[]>
  ```

### UploadedImage

* id

  The ID of the uploaded image.

  ```ts
  string
  ```

* imageUrl

  The URL of the uploaded image.

  ```ts
  string
  ```

* resourceUrl

  The resource URL of the uploaded image.

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### tsx

  ```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>
  }
  ```

***