Premium Widgets
Custom Upload
Upload en React
Selecciona archivos, reduce imágenes y pasa los resultados a tu aplicación. El widget no realiza por sí mismo ningún upload al backend.
Referencia para @arcrider/arcwidgets-react@0.1.0-alpha.5. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
import { ArcWidgetUpload } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() { const [preview, setPreview] = useState(''); const [name, setName] = useState(t('Keine Datei', 'No file', 'Sin archivo')); return ( <> <ArcWidgetUpload data={{ container: { height: '220px', width: '100%', label: t('Bild auswählen', 'Choose an image', 'Elegir imagen'), }, image: { width: 1000, format: 'jpeg', quality: 0.8, }, multiupload: false, }} onUpload={(file) => { setPreview(file.src); setName(file.name); }} /> <p aria-live="polite">{name}</p> {preview && ( <img src={preview} alt={t('Ausgewählte Datei', 'Selected file', 'Archivo seleccionado')} style={{ maxWidth: 300 }} /> )} </> ); }</code></pre>
Props del componente
id
ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.
data
Configuración de tipo ArcWidgetUploadData. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.
onAction
Fallback opcional (type: string, ...args: unknown[]) => unknown. El callback concreto tiene prioridad. Detalles: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onUpload
Un archivo preparado por callback.
onUpload?: (payload: ArcWidgetUploadPayload) => void | Promise<void>;
Configuración
Los siguientes campos pertenecen a data. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.
image
Reducción de tamaño, formato de imagen y calidad.
Tipo: ArcWidgetUploadImage.
container
Tamaño y etiqueta del área de subida.
Tipo: ArcWidgetUploadContainer.
multiupload
Permite seleccionar varios archivos.
Tipo: boolean.
capture
Solicita la cámara en dispositivos compatibles.
Tipo: boolean.
clipboard
Pegar desde el portapapeles.
Tipo: boolean | { tooltip?: string | { value?: string; position?: string } }.
drag
Seleccionar archivos mediante arrastrar y soltar.
Tipo: boolean | ArcWidgetUploadDrag.
logs
Vista previa adicional e información de tamaño.
Tipo: boolean.
filename
Nombre propio para el resultado.
Tipo: string.
showLoadingPopup
Indicador de carga durante el procesamiento.
Tipo: boolean.
convertSettings
Opciones adicionales de conversión, por ejemplo la devolución del original.
Tipo: { originalFile?: boolean | Record<string, unknown>; [key: string]: unknown }.
Comportamiento y límites
onUpload se llama por cada archivo y recibe name, src, y en el caso de imágenes también las dimensiones. src es la data URL preparada.
image controla el tamaño máximo de imagen, el formato y la calidad. multiupload permite varios archivos.
- Transfiere el archivo en el callback a tu propia API y gestiona allí el éxito y los errores. El widget no incluye ningún servicio de almacenamiento propio.
Los campos ArcWidgetSlot admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
Tipos de datos
Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como ArcWidgetSlot, ArcWidgetStyles y ArcReactWidgetProps. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.
export interface ArcWidgetUploadImage {
width?: number;
height?: number;
format?: 'jpeg' | 'webp' | 'original' | string;
quality?: number;
}
export interface ArcWidgetUploadDrag { enabled?: boolean; label?: string; target?: string; targetId?: string; }
export interface ArcWidgetUploadContainer { height?: string; width?: string; label?: string; icon?: string; value?: unknown; }
export interface ArcWidgetUploadData extends ArcWidgetBaseData { image?: ArcWidgetUploadImage; container?: ArcWidgetUploadContainer; multiupload?: boolean; capture?: boolean; clipboard?: boolean | { tooltip?: string | { value?: string; position?: string } }; drag?: boolean | ArcWidgetUploadDrag; logs?: boolean; filename?: string; showLoadingPopup?: boolean; convertSettings?: { originalFile?: boolean | Record<string, unknown>; [key: string]: unknown }; }
export interface ArcWidgetUploadPayload { name: string; src: string; width?: number; height?: number; original?: string | null; } export interface ArcWidgetUploadProps extends ArcReactWidgetProps<ArcWidgetUploadData> { onUpload?: (payload: ArcWidgetUploadPayload) => void | Promise<void>; }</code></pre>