Component

File Upload

Disponible

Permite a los usuarios cargar archivos mediante clic o drag & drop, con señales visuales claras sobre formatos y restricciones.

Arrastrá o hacé clic

PDF, JPG o PNG de hasta 3 MB.

Drop zone · Click · Validation

Import

Importa los estilos base y el componente FileUpload.

TypeScript

1import 'nave-ui-library/styles.css'
2import { FileUpload } from 'nave-ui-library/react'

Default Upload

La zona de carga estándar permite seleccionar un solo archivo (PDF, JPG o PNG) con un límite de 3 MB.

Hacé clic o arrastrá los archivos para cargarlos

Deben ser PDF, JPG o PNG de hasta 3 MB.

Multiple Files

Habilita la carga múltiple y restringe los archivos solo a imágenes con un tamaño más estricto.

Subí tus fotos de perfil

Solo JPG o PNG. Máximo 1 MB por foto.

States

Soporta distintos estados visuales: default, drag, error y disabled.

Hacé clic o arrastrá los archivos para cargarlos

Deben ser PDF, JPG o PNG de hasta 3 MB.

Hacé clic o arrastrá los archivos para cargarlos

Deben ser PDF, JPG o PNG de hasta 3 MB.

Hacé clic o arrastrá los archivos para cargarlos

Deben ser PDF, JPG o PNG de hasta 3 MB.

Hacé clic o arrastrá los archivos para cargarlos

Deben ser PDF, JPG o PNG de hasta 3 MB.

API Reference

Props disponibles para FileUpload.

Prop	Type	Default	Description
`state`	`"default" \| "drag" \| "error" \| "disabled"`	`"default"`	Estado visual del componente.
`title`	`string`	—	Título principal de la zona de carga.
`description`	`string`	—	Descripción con restricciones de archivo.
`icon`	`ReactNode`	—	Ícono superior personalizable.
`multiple`	`boolean`	`false`	Permite la carga de múltiples archivos.
`accept`	`string[]`	—	Array de MIME types aceptados.
`maxSizeMB`	`number`	`3`	Tamaño máximo por archivo en MB.
`onFilesChange`	`(files: File[]) => void`	—	Callback al seleccionar archivos.
`onError`	`(errors: string[]) => void`	—	Callback cuando hay errores de validación.
`actions`	`ReactNode`	—	Slot para botones de acción personalizados.
`buttonLabel`	`string`	—	Texto del botón de selección de archivos.

Registry

Ver configuración técnica del registro

JSON

1{
2  "name": "FileUploadFile",
3  "description": "Componente para mostrar archivos cargados.",
4  "component": "FileUploadFile",
5  "files": [
6    "components/base/data-display/system-feedback/FileUploadFile.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "multiple": {
13      "type": "boolean",
14      "description": "Allows selecting multiple files."
15    },
16    "accept": {
17      "type": "string[]",
18      "description": "List of accepted MIME types."
19    },
20    "maxSizeMB": {
21      "type": "number",
22      "description": "Maximum allowed file size in megabytes."
23    },
24    "onFilesChange": {
25      "type": "(files: File[]) => void",
26      "description": "Callback triggered when the selected files change."
27    },
28    "onError": {
29      "type": "(errors: FileError[]) => void",
30      "description": "Callback triggered when a validation error occurs."
31    }
32  }
33}

Prop

Type

Default

Description

state

"default" | "drag" | "error" | "disabled"

"default"

Estado visual del componente.

title

string

—

Título principal de la zona de carga.

description

string

—

Descripción con restricciones de archivo.

icon

ReactNode

—

Ícono superior personalizable.

multiple

boolean

false

Permite la carga de múltiples archivos.

accept

string[]

—

Array de MIME types aceptados.

maxSizeMB

number

3

Tamaño máximo por archivo en MB.

onFilesChange

(files: File[]) => void

—

Callback al seleccionar archivos.

onError

(errors: string[]) => void

—

Callback cuando hay errores de validación.

actions

ReactNode

—

Slot para botones de acción personalizados.

buttonLabel

string

—

Texto del botón de selección de archivos.

1{ 2 "name": "FileUploadFile", 3 "description": "Componente para mostrar archivos cargados.", 4 "component": "FileUploadFile", 5 "files": [ 6 "components/base/data-display/system-feedback/FileUploadFile.tsx" 7 ], 8 "dependencies": [ 9 "react" 10 ], 11 "props": { 12 "multiple": { 13 "type": "boolean", 14 "description": "Allows selecting multiple files." 15 }, 16 "accept": { 17 "type": "string[]", 18 "description": "List of accepted MIME types." 19 }, 20 "maxSizeMB": { 21 "type": "number", 22 "description": "Maximum allowed file size in megabytes." 23 }, 24 "onFilesChange": { 25 "type": "(files: File[]) => void", 26 "description": "Callback triggered when the selected files change." 27 }, 28 "onError": { 29 "type": "(errors: FileError[]) => void", 30 "description": "Callback triggered when a validation error occurs." 31 } 32 } 33}