co-file-field

This content is not available in your language yet.

Campo de selección de archivos con zona de arrastrar-y-soltar, previsualización de imágenes y lista con progreso. No sube nada por sí mismo: emite coFilesSelected con los File y el host gestiona la subida, alimentando de vuelta el estado mediante la prop controlada files.

Demo

Ver código

<co-file-field label="Adjuntos" locale="es" multiple accept=".pdf,.png,.jpg" helper-text="PDF o imágenes hasta 10 MB"></co-file-field>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`accept`	`accept`	`string \| undefined`	`—`	Accepted formats: comma list of extensions/mime (e.g. ".pdf,.png" or a JSON array).
`disabled`	`disabled`	`boolean`	`false`
`dropText`	`drop-text`	`string \| undefined`	`—`	Main drag-and-drop hint in the dropzone (defaults to the locale string).
`files`	`files`	`string`	`'[]'`	Controlled file list, JSON array of {@link FileItem} (owned by the host).
`helperText`	`helper-text`	`string \| undefined`	`—`	Helper text shown below the field.
`label`	`label`	`string \| undefined`	`—`
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`locale`	`locale`	`string \| undefined`	`—`	BCP-47 locale for the built-in UI strings (es/en/pt).
`maxBytes`	`max-bytes`	`number \| undefined`	`—`	Max bytes per file.
`maxFiles`	`max-files`	`number`	`100`	Max number of files (multiple mode).
`multiple`	`multiple`	`boolean`	`false`
`readonly`	`readonly`	`boolean`	`false`
`reorderable`	`reorderable`	`boolean`	`true`	Allow drag-reordering of the uploaded list (multiple mode).
`required`	`required`	`boolean`	`false`
`status`	`status`	`"default" \| "error" \| "success" \| "warning"`	`'default'`	External validation status (e.g. from a form controller).
`uploadButtonText`	`upload-button-text`	`string \| undefined`	`—`	Override for the dropzone CTA button text.
`uploadedTitle`	`uploaded-title`	`string \| undefined`	`—`	Override for the uploaded-files heading (count is appended).

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coClear`	`void`	—	✓	Emitted to clear all files.
`coCopy`	`{ id: string; url: string; }`	—	✓	Emitted when a file URL is copied to the clipboard.
`coFilesSelected`	`{ files: File[]; tempIds: string[]; }`	—	✓	Emitted when the user picks/drops valid files. Detail carries the raw Files.
`coPreviewOpen`	`{ id: string; url: string; }`	—	✓	Emitted when an image preview is opened.
`coRemove`	`string`	—	✓	Emitted to remove a file (id or tempId).
`coReorder`	`string[]`	—	✓	Emitted after a drag-reorder with the full ordered list of keys (id ?? tempId).

Slots

Slot	Descripción
`actions`	Extra host actions rendered inside the dropzone (e.g. paste from clipboard, pick from cloud drive).

CSS Parts

Part	Descripción
`::part(actions)`	Container of the host-provided `actions` slot
`::part(drag-handle)`	The reorder handle of a row
`::part(dropzone)`	The drag-and-drop / browse area
`::part(helper)`	The helper/error text row
`::part(label)`	The field label
`::part(list)`	The uploaded/in-progress file list
`::part(preview)`	A single image preview card
`::part(previews)`	The image previews grid
`::part(row)`	A single file row
`::part(upload-button)`	The pill CTA button inside the dropzone
`::part(uploaded-title)`	The "Uploaded files (n)" heading
`::part(wrapper)`	Root container

CSS Custom Properties

Este componente no expone CSS custom properties.