FileUpload

Zona drag & drop para subir archivos con preview, validación de tamaño y tipos.

pnpm dlx nuvo-ui add file-upload

Básico

Arrastra archivos aquí o haz clic para seleccionar

Cualquier formato · Máx. 5 MB

Sube los documentos necesarios para tu perfil.

Solo imágenes

Arrastra tu foto aquí o haz clic para seleccionar

Formatos: image/* · Máx. 2 MB

PNG, JPG, WEBP · Máx. 2 MB

Archivo único

Adjunta tu CV o haz clic para seleccionar

Formatos: .pdf,.docx · Máx. 10 MB

PDF o DOCX · Máx. 10 MB

Uso

import { FileUpload } from "@nuvo-ui/ui"

<FileUpload
  multiple
  accept="image/*"
  maxSizeMb={5}
  maxFiles={10}
  label="Arrastra archivos aquí o"
  helperText="PNG, JPG · Máx. 5 MB"
  onChange={(files) => {
    // files: FileUploadFile[] — { file: File, id: string, error?: string }
    const valid = files.filter(f => !f.error)
    console.log(valid.map(f => f.file))
  }}
/>

Props

Prop	Tipo	Default	Descripción
accept	string	—	Tipos aceptados, ej. 'image/*' o '.pdf,.docx'
multiple	boolean	false	Permite seleccionar múltiples archivos
maxSizeMb	number	5	Tamaño máximo por archivo en MB
maxFiles	number	10	Número máximo de archivos
label	string	"Arrastra archivos aquí o"	Texto del drop zone
helperText	string	—	Texto de ayuda debajo del drop zone
disabled	boolean	false	Deshabilita el componente
onChange	(files: FileUploadFile[]) => void	—	Callback con todos los archivos actuales