ImageCropField

ImageCropField muestra una zona de arrastre que acepta imágenes PNG, JPEG y SVG. Tras seleccionar un archivo, el componente abre el ImageCropModal (pantalla completa) para que el usuario recorte la imagen con el ratio de aspecto deseado. Una vez confirmado el recorte, la imagen se sube via POST a uploadPath y onChange es llamado con la ruta de archivo devuelta por el servidor. Se muestra una previsualización de la imagen actual con un botón para eliminarla.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Ruta de imagen actual (ruta relativa devuelta por el servidor). | | onChange | (imagePath: string) => void | Sí | — | Llamado con la nueva ruta tras una carga exitosa, o con '' al limpiar. | | apiBaseUrl | string | Sí | — | URL base de la API usada para la request de carga. | | uploadPath | string | Sí | — | Ruta API del endpoint de carga (ej. /v1/files/upload). | | targetDir | string | Sí | — | Directorio destino en el servidor donde se almacenará el archivo. | | label | string | No | — | Etiqueta mostrada sobre el campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | filesBaseUrl | string | No | urls.filesBase | URL base para construir la URL de previsualización. | | useAuthToken | boolean | No | true | Si se adjunta el token de auth a la request de carga. | | isPublic | boolean | No | true | Enviado al servidor para marcar el archivo como accesible públicamente. | | fileName | string | No | — | Sobreescribe el nombre de archivo enviado en el form data de carga. | | aspectRatio | number | No | 1 | Ratio de aspecto del recorte (ej. 1 para cuadrado, 16/9 para panorámico). | | maxFileSize | number | No | — | Tamaño máximo de archivo aceptado en MB. | | dropzoneLabel | string | No | — | Etiqueta mostrada dentro de la zona de arrastre. | | dropzoneIcon | string | No | — | Nombre del ícono mostrado dentro de la zona de arrastre. | | modalZIndex | number | No | 99999 | z-index aplicado al modal de recorte. | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor exterior. |

Uso

Avatar cuadrado básico

import React, { useState } from 'react';
import ImageCropField from '@/components/fields/ImageCropField';

export default function Example() {
  const [imagePath, setImagePath] = useState('');

  return (
    <ImageCropField
      label="Foto de perfil"
      value={imagePath}
      onChange={setImagePath}
      apiBaseUrl="https://api.example.com"
      uploadPath="/v1/files/upload"
      targetDir="avatars"
      aspectRatio={1}
    />
  );
}

Banner 16:9

<ImageCropField
  label="Banner"
  value={bannerPath}
  onChange={setBannerPath}
  apiBaseUrl="https://api.example.com"
  uploadPath="/v1/files/upload"
  targetDir="banners"
  aspectRatio={16 / 9}
  maxFileSize={5}
  dropzoneLabel="Arrastrá una imagen de banner aquí"
/>