FileUpload

Zona para subir archivos con clic o arrastrando, y lista de archivos con su progreso.

Cuándo usarlo

Props. accept, multiple, hint (formatos y tamaño máximo), onFiles(files), files [{name, size (bytes), progress 0–100, status (complete · error), error}], onRemove(index), disabled.

Visual. Zona bg-primary con borde border-secondary y radius-xl; al arrastrar o en hover, borde de 2px border-brand. Cada archivo en tarjeta con icono, nombre, tamaño y ProgressBar; completado en text-success-primary con icono; error con borde border-error_subtle y mensaje.

Reglas. Di siempre qué formatos se aceptan antes de que el usuario lo intente. El componente no sube nada: tú gestionas la subida y le pasas el progreso.

Textos. Todos se pueden cambiar con labels (objeto parcial).

Diferencia con la vista previa de la guía. Los tamaños salen con un decimal, como el resto de cifras de la librería: "12,5 KB" donde la guía redondea a "13 KB".

Ejemplos

Haz clic para subir o arrastra y sueltaCSV o Markdown (máx. 10 MB)

extracto-octubre.csv
200 KB Completado
notas-reunion.md
12,5 KB Subiendo…
40%
foto-ticket.heic
Formato no admitido

Props

Prop	Tipo	Por defecto	Descripción
`accept`	`string`	—	Formatos aceptados, como en `<input type="file">`: `.csv,.md`, `image/*`.
`multiple`	`boolean`	—
`hint`	`ReactNode`	—	Formatos y tamaño máximo. Dilo siempre antes de que el usuario lo intente.
`onFiles`	`((files: File[]) => void)`	—	Archivos elegidos con clic o soltados. El componente no sube nada.
`files`	`UploadFile[]`	`[]`	Archivos en curso, con el progreso que gestionas tú.
`onRemove`	`((index: number) => void)`	—
`disabled`	`boolean`	—
`labels`	`Partial<FileUploadLabels>`	—	Textos sustituibles.
`id`	`string`	—
`className`	`string`	—

Código

import { FileUpload } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<FileUpload accept=".csv" hint="CSV (máx. 10 MB)" onFiles={(files) => subir(files)} />
		</>
	);
}

---
import { FileUpload } from "@jotis-me/react";
---

<FileUpload client:load accept=".csv" hint="CSV (máx. 10 MB)" onFiles={(files) => subir(files)} />

onFiles es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.