Todos los componentes (204)

Subir ficheros

Gestión · FileUpload · .amset-upload

Qué es y cuándo usarlo

Una zona para soltar ficheros, con su botón para elegirlos: arrastrar no vale con el teclado, así que el botón no es opcional. Debajo, la lista de lo elegido, con el tamaño escrito como aquí («980 kB», «2,4 MB») y un botón para quitar cada uno.

Cuándo usarlo

Adjuntar facturas, justificantes, el logotipo de la tienda, un CSV para importar.
acceptedTypes (tipos MIME, image/* o extensiones como .csv) y maxSizeMb filtran lo que entra; lo rechazado llega por onReject con su motivo, y lo pinta quien lo usa (con un Alert, por ejemplo).
multiple para admitir más de uno (con maxCount como tope); sin él, elegir otro sustituye al anterior. directory elige una carpeta entera.
El filtro de aquí es comodidad: el servidor tiene que volver a comprobarlo, que cualquiera manda un fichero sin pasar por esta pantalla.

Cuándo no

Subirlos en cuanto se eligen, con una barra por fichero, reintentar y cancelar: Uploader (Subida con progreso), que monta esta zona con su lista de subidas.
Enseñar los adjuntos que ya están subidos (con descargar, progreso o reintentar): FileList.

Teclado: Tab llega a la zona, luego al botón («Elegir un fichero» o «Elegir ficheros»; Intro o Espacio abren el selector del sistema) y después a cada «Quitar». Intro o Espacio sobre la zona también abren el selector, y con el foco en ella se pueden pegar ficheros del portapapeles.

Accesibilidad: la zona se llama como la etiqueta, seguida de su texto («Facturas del proveedor Arrastra los ficheros aquí»). Cada botón de quitar dice qué quita («Quitar factura-2026-0142.pdf») y quita solo ese fichero, aunque haya otro con el mismo nombre; la lista se llama «Ficheros elegidos para …» con la etiqueta detrás. El navegador solo filtra por tipo al elegir con el botón; lo que llega arrastrando o pegado lo comprueba el propio componente, y lo que no se deja leer llega por onReject («No se ha podido leer el fichero»).

Aspecto fino: variables CSS --amset-upload-*: -extra, -file-font, -file-padding, -font, -gap, -icon, -radius, -remove, -remove-icon, -target, -zone-padding, -zone-radius. El tamaño mueve el relleno de la zona, el icono y los cuerpos de letra. La equis de quitar se VE en -remove y se PULSA en -target.

Cómo se ve

Adjuntar documentos

Arrastra los ficheros aquí

<FileUpload label="Adjuntar documentos" multiple onSelect={recibir} />

Props

Se importa con import { FileUpload } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Lo que se sube. Es el nombre de la zona de soltar y de la lista de lo elegido.
`onSelect`obligatoria	`(files: readonly File[]) => void`	—
`acceptedTypes`	`readonly string[]`	Tipos MIME o extensiones: `['application/pdf', '.csv']`.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`directory`	`boolean`	Elegir una CARPETA entera en vez de ficheros sueltos. Soltar una carpeta encima no la recorre.
`disabled`	`boolean`	—
`error`	`string`	—
`files`	`readonly File[]`	Ficheros ya elegidos, para poder pintarlos y quitarlos.
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. La zona de soltar ya lleva su propio nombre, asi que se puede ocultar a la vista sin perder nada.
`hideList`	`boolean`	No pintar la lista de elegidos de debajo: para quien la pinta por su cuenta (`Uploader`).
`hint`	`string`	Texto de ayuda: qué formatos y qué tamaño se admiten.
`inputRef`	`Ref<HTMLInputElement>`	El `<input type="file">` de verdad (va escondido), para abrir el selector desde un boton propio con `inputRef.current?.click()` (AMS-735).
`maxCount`	`number`	Cuantos ficheros caben como mucho. Los que sobran se rechazan con su motivo. Sin esto, sin tope.
`maxSizeMb`	`number`	Tamaño máximo por fichero, en megabytes.
`multiple`	`boolean`	—
`onReject`	`(rejected: readonly RejectedFile[]) => void`	Se llama con los que no pasaron el filtro de tipo o de tamaño, o no se pudieron leer.
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-upload-gap`	`var(--amset-space-2)`
`--amset-upload-zone-padding`	`var(--amset-space-6) var(--amset-space-4)`
`--amset-upload-zone-radius`	`var(--amset-radius-lg)`
`--amset-upload-icon`	`1.75rem`
`--amset-upload-font`	`var(--amset-text-base)`
`--amset-upload-file-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-upload-file-font`	`var(--amset-text-sm)`
`--amset-upload-radius`	`var(--amset-radius)`
`--amset-upload-remove`	`1.5rem`
`--amset-upload-remove-icon`	`0.75rem`
`--amset-upload-target`	`var(--amset-upload-remove)`
`--amset-upload-extra`	`calc((var(--amset-upload-target) - var(--amset-upload-remove)) / 2)`

Cómo se cambia

.amset-upload {
  --amset-upload-gap: ...;
  --amset-upload-zone-padding: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: