# Image cropper (UI SDK): Upload

> Crop a photo from a file input with an object URL. Give the cropper a `key` so a new photo starts a fresh crop.

Canonical: https://hextaui.com/docs/ui-sdk-image-cropper/examples/upload

Component docs: https://hextaui.com/docs/ui-sdk-image-cropper

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-image-cropper-upload.json
```

This adds `components/examples/ui-sdk-image-cropper/upload.tsx` with the Image cropper component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-image-cropper/upload.tsx"
"use client"

import * as React from "react"

import { Input } from "@/components/ui/input"
import {
  ImageCropper,
  ImageCropperGrid,
  ImageCropperHandles,
  ImageCropperImage,
  ImageCropperSelection,
  ImageCropperViewport,
} from "@/components/ui/ui-sdk-image-cropper"

function UiSdkImageCropperUpload() {
  const [src, setSrc] = React.useState<string>()

  React.useEffect(
    () => () => {
      if (src) URL.revokeObjectURL(src)
    },
    [src]
  )

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Input
        type="file"
        accept="image/*"
        aria-label="Choose a photo"
        onChange={(event) => {
          const file = event.target.files?.[0]
          if (file) setSrc(URL.createObjectURL(file))
        }}
      />
      {src ? (
        <ImageCropper key={src} aria-label="Photo" src={src} aspectRatio={1}>
          <ImageCropperViewport>
            <ImageCropperImage alt="The photo you chose" />
            <ImageCropperSelection>
              <ImageCropperGrid />
              <ImageCropperHandles />
            </ImageCropperSelection>
          </ImageCropperViewport>
        </ImageCropper>
      ) : (
        <p className="text-sm text-muted-foreground">
          Choose a photo to crop it.
        </p>
      )}
    </div>
  )
}

export { UiSdkImageCropperUpload }
```

## Props in this example

### ImageCropper

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | – |  |
| `aspectRatio` | `number` | – |  |

### ImageCropperImage

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `alt` | `string` | – | Required. |

## More Image cropper examples

- [Avatar](https://hextaui.com/docs/ui-sdk-image-cropper/examples/avatar)
- [Rotate and flip](https://hextaui.com/docs/ui-sdk-image-cropper/examples/rotate-flip)
- [Controller](https://hextaui.com/docs/ui-sdk-image-cropper/examples/controlled)
- [Disabled](https://hextaui.com/docs/ui-sdk-image-cropper/examples/disabled)