Formulário com Upload de Imagem

Exemplos de Uso

Veja como implementar o ImageCropField em diferentes cenários

Uso Básico - Avatar Circular

Exemplo simples para upload de avatar com formato circular

import ImageCropField from '@/components/image-upload';
import { Controller, useForm } from 'react-hook-form';

const MyComponent = () => {
  const { control } = useForm();

  return (
    <Controller
      name="avatar"
      control={control}
      render={({ field }) => (
        <ImageCropField
          field={field}
          aspect={1}
          cropShape="round"
          label="Foto do Perfil"
          output={{
            width: 200,
            height: 200,
            quality: 0.8
          }}
        />
      )}
    />
  );
};

Resultado

Preview:

💡 Dicas de Implementação

  • • Use aspect=1 para imagens quadradas (avatares)
  • • Configure output para definir o tamanho final da imagem
  • • Combine com React Hook Form para validação automática
  • • Ajuste viewportWidth/Height conforme seu layout
  • • Use maxFileSizeBytes para limitar o tamanho dos uploads