File Upload

Zona de arrastrar y soltar, selector de archivos, lista de aceptados y eliminación por archivo

Subida de archivos basada en Ark UI File Upload. El <FileUpload /> por defecto incluye etiqueta, dropzone con borde discontinuo, disparador y lista de archivos con tamaño y acción de borrar. Pasa props de la raíz de Ark como accept, maxFiles o maxFileSize para restringir la selección.

Adjuntos

Drag and drop files here

import { FileUpload } from "@/components/ui/file-upload";

export default function Example() {
  return <FileUpload label="Adjuntos" />;
}

View Code

Instalación

bash

liminal add file-upload

Uso

label y placeholder personalizan el texto del dropzone. Reenvía validación en la raíz: por ejemplo maxFiles={3}, accept={["image/png", "image/jpeg"]} o maxFileSize.

Imágenes (máx. 3)

Suelta imágenes aquí o explora

import { FileUpload } from "@/components/ui/file-upload";

export default function Example() {
  return (
    <FileUpload
      label="Imágenes (máx. 3)"
      placeholder="Suelta imágenes aquí o explora"
      maxFiles={3}
      accept={["image/png", "image/jpeg", "image/webp"]}
    />
  );
}

View Code

Ejemplos

API compuesta

Partes reexportadas: FileUploadRoot, FileUploadLabel, FileUploadDropzone, FileUploadTrigger, FileUploadItemGroup, FileUploadItem, FileUploadItemName, FileUploadItemSizeText, FileUploadItemDeleteTrigger, FileUploadHiddenInput y FileUploadClearTrigger. Usa FileUpload.Context de @ark-ui/react/file-upload para leer acceptedFiles o rejectedFiles y montar listas personalizadas (como el <FileUpload /> de conveniencia).

tsx

import {
  FileUploadRoot,
  FileUploadLabel,
  FileUploadDropzone,
  FileUploadTrigger,
  FileUploadHiddenInput,
} from "@/components/ui/file-upload";

export default function Example() {
  return (
    <FileUploadRoot maxFiles={5}>
      <FileUploadLabel>Archivos</FileUploadLabel>
      <FileUploadDropzone>
        <p className="text-sm text-muted-foreground">Arrastra archivos o usa el botón</p>
        <FileUploadTrigger>Elegir archivos</FileUploadTrigger>
      </FileUploadDropzone>
      <FileUploadHiddenInput />
    </FileUploadRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Etiqueta opcional sobre el control.
placeholder	string	"Drag and drop files here"	Texto de ayuda dentro del dropzone.

También acepta las props de FileUpload.Root de Ark (accept, maxFiles, maxFileSize, minFileSize, disabled, onFileAccept, etc.). Ver Ark File Upload.