wiki-Upload

Ver en Git

---

Upload

Este componente permite cargar archivos mediante un formulario que soporta acciones como arrastrar y soltar o seleccionar archivos desde un directorio. Es personalizable y facilita la integración en aplicaciones que necesitan gestionar la carga de archivos.

Referencia de la API

Propiedad	Tipo	Descripción	Por defecto
className	string	Clase CSS adicional para personalizar estilos del componente.	undefined
children	React.ReactNode	Contenido adicional que se renderiza en el pie del componente.	undefined
accept	string[]	Lista de extensiones de archivo permitidas para la carga (sin el punto).	undefined
required	string[]	Extensiones de archivo obligatorias que deben cargarse.	[]
optional	string[]	Extensiones de archivo opcionales que se pueden cargar.	[]
filesTitle	string	Título que describe el formato de los archivos requeridos y opcionales.	undefined
title	string	Título principal del componente.	undefined
buttonText	string	Texto que se muestra en el botón de carga.	undefined
action	Promise<File[]>	Acción adicional para ejecutar tras cargar los archivos.	undefined
directory	boolean	Permite seleccionar un directorio completo en lugar de archivos individuales.	false
disabled	boolean	Deshabilita el componente para impedir la carga de archivos.	false
loading	boolean	Indica si el componente está en estado de carga, mostrando un indicador.	false
fileList	File[]	Lista de archivos seleccionados actualmente.	undefined
onChange	(files: File[]) => void	Callback que se ejecuta cuando cambia la lista de archivos cargados.	undefined

Ejemplo de uso

import { useState } from 'react';
import { Upload } from '@auravant/ui-kit';

export const UploadExample = () => {
 const [files, setFiles] = useState<File[]>([]);

 const handleFileChange = (newFiles: File[]) => {
 setFiles(newFiles);
 };

 return (
 <Upload
 title="Carga de Archivos"
 buttonText="Seleccionar Archivos"
 filesTitle="Formatos permitidos: .jpg, .png"
 required={['jpg', 'png']}
 fileList={files}
 onChange={handleFileChange}
 accept={['jpg', 'png']}
 disabled={false}
 loading={false}
 >
 <p>Arrastra y suelta tus archivos aquí o haz clic para seleccionarlos.</p>
 </Upload>
 );
};