# Carga de archivos

> Zona de carga y ficha de cada archivo con su estado: en espera, subiendo, revisando, error y listo.

Categoría: Formularios · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- En formularios que piden documentos o imágenes.
- Di antes de subir qué tipos y qué tamaño se aceptan.
- Cada archivo muestra su estado y se puede quitar o reintentar.

## Zona de carga

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg"><div class="flex flex-col items-center gap-3 rounded-ccs border border-dashed border-ccs-line-strong bg-ccs-bg p-8 text-center dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"><span class="grid place-items-center w-12 h-12 rounded-ccs bg-white dark:bg-ccs-dark-overlay"><iconify-icon icon="solar:cloud-upload-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><div><p class="text-sm font-medium">Arrastra tus archivos acá o</p><p class="mt-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2">PDF, JPG o PNG. Hasta 10 MB por archivo.</p></div><label class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text cursor-pointer focus-within:ring-2 focus-within:ring-ccs-blue focus-within:ring-offset-2"><iconify-icon icon="solar:upload-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Elige archivos<input type="file" multiple accept=".pdf,.jpg,.png" class="sr-only" /></label></div></div></div>
```

## Estados

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg space-y-2" aria-live="polite"><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">estatutos-empresa.pdf</div><span class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">PDF · 1,2 MB · listo para subir</span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar estatutos-empresa.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">balance-2025.pdf</div><span class="flex items-center gap-2"><span role="progressbar" aria-label="Subiendo balance-2025.pdf" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" class="flex-1 h-1.5 rounded-full bg-ccs-line dark:bg-ccs-dark-line overflow-hidden"><span class="block h-full rounded-full bg-ccs-blue dark:bg-ccs-dark-accent w-[45%]"></span></span><span class="text-xs tabular-nums text-ccs-slate dark:text-ccs-dark-text-2">45 %</span></span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar balance-2025.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">certificado-vigencia.pdf</div><span class="flex items-center gap-2 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-block w-4 h-4 shrink-0 rounded-full border-2 border-ccs-line border-t-ccs-blue animate-spin dark:border-ccs-dark-line dark:border-t-ccs-dark-accent" aria-hidden="true"></span>Revisando el archivo…</span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar certificado-vigencia.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-error-line bg-ccs-error-soft dark:border-ccs-dark-error/35 dark:bg-ccs-dark-error-fill/10 w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">escritura.pdf</div><span class="flex items-center gap-1 text-xs text-ccs-error dark:text-ccs-dark-error"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>No se pudo subir. Revisa tu conexión.</span></div><div class="flex items-center gap-1 shrink-0"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:refresh-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Reintentar</button><button type="button" aria-label="Quitar escritura.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">rut-empresa.pdf</div><span class="flex items-center gap-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span>PDF · 320 KB · subido</span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar rut-empresa.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div></div></div>
```

## Tamaños

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg space-y-3"><div class="flex items-center p-3 gap-3 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-sm font-medium truncate">informe-anual-2026.pdf</div><span class="flex items-center gap-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span>PDF · 2,4 MB</span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar informe-anual-2026.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div class="flex items-center p-2 gap-2.5 rounded-ccs border border-ccs-line dark:border-ccs-dark-line w-full"><div class="contents"><span class="grid place-items-center w-8 h-8 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span></div><div class="flex-1 min-w-0 space-y-1"><div class="text-xs font-medium truncate">informe-anual-2026.pdf</div><span class="flex items-center gap-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span>PDF · 2,4 MB</span></div><div class="flex items-center gap-1 shrink-0"><button type="button" aria-label="Quitar informe-anual-2026.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div><div><div class="inline-flex shrink-0 items-center py-1 pl-1 pr-1.5 gap-2 rounded-lg border border-ccs-line dark:border-ccs-dark-line max-w-[224px]"><span class="grid place-items-center w-6 h-6 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span><span class="text-xs font-medium truncate">informe-anual-2026.pdf</span><button type="button" aria-label="Quitar informe-anual-2026.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs  transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg !w-6 !h-6 rounded-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></button></div></div></div></div>
```

## Imágenes

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-36 rounded-ccs border border-ccs-line dark:border-ccs-dark-line p-2"><span class="ph block aspect-square w-full rounded-lg" role="img" aria-label="Vista previa de fachada.jpg"></span><figcaption class="mt-2 px-1"><div class="text-xs font-medium truncate">fachada.jpg</div><div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">JPG · 2,1 MB</div></figcaption></figure><figure class="w-36 rounded-ccs border border-ccs-line dark:border-ccs-dark-line p-2"><span class="ph block aspect-square w-full rounded-lg" role="img" aria-label="Vista previa de logo.png"></span><figcaption class="mt-2 px-1"><div class="text-xs font-medium truncate">logo.png</div><div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">PNG · 84 KB</div></figcaption></figure><figure class="w-36 rounded-ccs border border-ccs-line dark:border-ccs-dark-line p-2"><span class="ph block aspect-square w-full rounded-lg" role="img" aria-label="Vista previa de plano.jpg"></span><figcaption class="mt-2 px-1"><div class="text-xs font-medium truncate">plano.jpg</div><div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">JPG · 3,4 MB</div></figcaption></figure></div>
```

## En un mensaje

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white dark:bg-ccs-dark-surface"><div class="flex gap-2 overflow-x-auto p-2 border-b border-ccs-line dark:border-ccs-dark-line"><div class="inline-flex shrink-0 items-center py-1 pl-1 pr-1.5 gap-2 rounded-lg border border-ccs-line dark:border-ccs-dark-line max-w-[224px]"><span class="grid place-items-center w-6 h-6 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span><span class="text-xs font-medium truncate">cotizacion.pdf</span><button type="button" aria-label="Quitar cotizacion.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs  transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg !w-6 !h-6 rounded-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></button></div><div class="inline-flex shrink-0 items-center py-1 pl-1 pr-1.5 gap-2 rounded-lg border border-ccs-line dark:border-ccs-dark-line max-w-[224px]"><span class="ph w-6 h-6 shrink-0 rounded-lg" role="img" aria-label="Vista previa"></span><span class="text-xs font-medium truncate">fachada.jpg</span><button type="button" aria-label="Quitar fachada.jpg"  class="inline-grid place-items-center w-8 h-8 rounded-ccs  transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg !w-6 !h-6 rounded-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></button></div><div class="inline-flex shrink-0 items-center py-1 pl-1 pr-1.5 gap-2 rounded-lg border border-ccs-line dark:border-ccs-dark-line max-w-[224px]"><span class="grid place-items-center w-6 h-6 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span><span class="text-xs font-medium truncate">anexo-tecnico.pdf</span><button type="button" aria-label="Quitar anexo-tecnico.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs  transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg !w-6 !h-6 rounded-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></button></div><div class="inline-flex shrink-0 items-center py-1 pl-1 pr-1.5 gap-2 rounded-lg border border-ccs-line dark:border-ccs-dark-line max-w-[224px]"><span class="grid place-items-center w-6 h-6 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></span><span class="text-xs font-medium truncate">contrato.pdf</span><button type="button" aria-label="Quitar contrato.pdf"  class="inline-grid place-items-center w-8 h-8 rounded-ccs  transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg !w-6 !h-6 rounded-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon></button></div></div><textarea aria-label="Mensaje" rows="2" placeholder="Escribe un mensaje…" class="block w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-ccs-slate dark:placeholder:text-ccs-dark-text-2"></textarea></div></div>
```

## Guía: Comportamiento

El botón "Elige archivos" funciona sin JS. Arrastrar y mostrar el avance sí necesitan JS. El avance va en role="progressbar"; el cambio de estado ("subido", "no se pudo subir") se anuncia con aria-live="polite". El error dice qué pasó y qué hacer, y el archivo queda en la lista para reintentar. Antes de subir se revisan tipo y tamaño, y se avisa en la ficha, no en una alerta aparte.