Todos los componentes (244)

Explorador de ficheros

Gestión · FileManager · .amset-explorer

Qué es y cuándo usarlo

Un explorador de ficheros: la ruta, buscar, lista o cuadrícula, ordenar, elegir varios, crear carpeta, renombrar, mover, borrar y subir.

Cuándo usarlo

Los documentos de un cliente, los adjuntos de un expediente o la carpeta compartida de un equipo.
entries es lo que hay en la carpeta abierta y path la ruta hasta ella; onOpen entra en una carpeta o abre un fichero, y onNavigate sube por la ruta.
Cada acción tiene su función (onCreateFolder, onRename, onMove, onDelete, onUpload, onDownload): sin ella, su botón no sale. Si la función falla, lo dice y no se pierde lo elegido.
Mover se hace con «Mover a» o arrastrando a una carpeta; subir, con el botón o soltando ficheros encima.

Cuándo no

Una lista de adjuntos sin carpetas: FileList. Solo subir ficheros: FileUpload o Uploader.
Dónde viven los ficheros, quién puede tocarlos y las versiones son cosa de la aplicación.

Teclado: todo son botones y casillas nativos; al renombrar o crear, Intro guarda y Escape cancela. Las cabeceras de la lista ordenan con Intro o Espacio.

Accesibilidad: es una región con nombre; cada cabecera lleva su aria-sort, cada casilla y cada botón el nombre de su entrada, y crear, mover, borrar y subir se anuncian.

Aspecto fino: --amset-explorer-gap, --amset-explorer-radius, --amset-explorer-tile (ancho mínimo de una ficha en cuadrícula) y --amset-explorer-badge.

Cómo se ve

Buscar en esta carpeta

ListaCuadrícula

				Acciones
		Carpeta
		2,5 MB
		86 kB

<FileManager
  label="Documentos de la tienda"
  entries={archivos}
  path={ruta}
  onNavigate={irA}
  onOpen={abrir}
  onCreateFolder={crearCarpeta}
  onRename={renombrar}
  onDelete={borrar}
  onUploadFile={subirUno}
  maxSize={5_000_000}
  rejectDuplicates
/>

Props

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

Prop	Tipo	Para qué sirve
`entries`obligatoria	`readonly FileEntry[]`	Lo que hay en la carpeta abierta.
`label`obligatoria	`string`	Que explorador es («Documentos del cliente»). Obligatorio.
`onOpen`obligatoria	`(entry: FileEntry) => void`	Abrir una entrada: entrar en la carpeta, o enseñar o descargar el fichero.
`accept`	`string`	Los tipos que se aceptan al subir, como el `accept` de un `<input type="file">`.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultView`	`FileManagerView`	—
`details`	`boolean`	El panel de detalles a la derecha: nombre, tipo, tamaño y fecha de lo elegido, con su miniatura si la tiene. Por defecto, no.
`hasMore`	`boolean`	Hay mas entradas en el servidor que las de `entries`: con esto y `onLoadMore` sale el boton «Cargar más». Buscar y ordenar solo miran lo cargado.
`loadFolders`	`(key: string) => Promise<readonly TreeNode[]>`	Con un arbol de carga diferida: pide los hijos de una carpeta la primera vez que se abre.
`loading`	`boolean`	—
`maxSize`	`number`	El tamaño maximo de un fichero al subir, en bytes. Lo que pase no se sube y se dice.
`onCreateFolder`	`(name: string) => void \| Promise<void>`	—
`onDelete`	`(ids: readonly string[]) => void \| FileBatchOutcome \| Promise<void \| FileBatchOutcome>`	Borrar lo elegido, con confirmacion. Si solo se borra una parte, devuelve `failed` con lo que no.
`onDownload`	`(entry: FileEntry) => void`	—
`onLoadMore`	`() => void \| Promise<void>`	—
`onMove`	`(ids: readonly string[], folder: string) => void \| FileBatchOutcome \| Promise<void \| FileBatchOutcome>`	Mover lo elegido a una carpeta: una de esta carpeta o una de la ruta. Tambien arrastrando sobre una carpeta. Si solo se mueve una parte, devuelve `failed` con lo que no.
`onNavigate`	`(key: string) => void`	Ir a una carpeta de la ruta.
`onRename`	`(id: string, name: string) => void \| Promise<void>`	—
`onUpload`	`(files: readonly File[], onProgress: ReportProgress) => void \| Promise<void>`	Subir ficheros a la carpeta abierta, con el boton o soltandolos encima, todos en una llamada y con una sola barra.
`onUploadFile`	`UploadFileHandler`	Subir los ficheros de uno en uno: cada uno sale en una lista con su barra, se puede cancelar (se dispara la señal) y, si falla, reintentar o quitar. Si esta, manda sobre `onUpload`.
`path`	`readonly Crumb[]`	Donde se esta, de la raiz a la carpeta abierta. La ultima miga es la carpeta actual.
`rejectDuplicates`	`boolean`	No subir un fichero que se llame igual que algo de la carpeta (sin distinguir mayusculas). Por defecto, se sube.
`renderPreview`	`(entry: FileEntry) => ReactNode`	Lo que se enseña en el panel de detalles en lugar de la miniatura (un visor de PDF, un reproductor).
`tree`	`readonly TreeNode[]`	El arbol de carpetas a la izquierda: elegir una la abre (llama a `onNavigate` con su clave). La carpeta marcada es la ultima de `path`. Sin esto, no hay arbol.

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-explorer-gap`	`var(--amset-space-3)`
`--amset-explorer-radius`	`var(--amset-radius-lg)`
`--amset-explorer-tile`	`10rem`
`--amset-explorer-badge`	`2rem`

Cómo se cambia

.amset-explorer {
  --amset-explorer-gap: ...;
  --amset-explorer-radius: ...;
}

En el banco de pruebas

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