---
title: "Custom Upload"
slug: "custom-upload"
category: "Widgets"
reactComponent: "ArcWidgetUpload"
reactTier: "premium"
reactSince: "0.1.0-alpha.5"
reactExample: "upload.tsx"
locale: "es"
hosts: "react"
---

# 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`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
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 }}
        />
      )}
    </>
  );
}
```

## 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: [Estado y eventos](/docs/react/patterns/react-state-events).

### onUpload

Un archivo preparado por callback.

```typescript
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. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## 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.

```typescript
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>;
}
```