Upload

Select a local image and crop it in the browser.

Loading example...

Code

import { type ChangeEvent, useState } from 'react'
import Cropper, { type Point } from 'react-easy-crop'

export default function UploadExample() {
  const [image, setImage] = useState<string | null>(null)
  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)

  function onFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]

    if (!file) {
      return
    }

    setImage(URL.createObjectURL(file))
  }

  return (
    <>
      <input type="file" accept="image/*" onChange={onFileChange} />

      {image ? (
        <div className="cropper">
          <Cropper
            image={image}
            crop={crop}
            zoom={zoom}
            aspect={4 / 3}
            onCropChange={setCrop}
            onZoomChange={setZoom}
          />
        </div>
      ) : null}
    </>
  )
}