Carga de archivos

Basado en un <input type="file"> nativo + zona de arrastrar y soltar. La petición la proporciona quien lo usa mediante la prop request (la biblioteca tiene cero dependencias en tiempo de ejecución y no incluye ningún cliente HTTP).

Uso básico

Uso básico

Seleccionar archivo

<script setup lang="ts">
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

accept también admite la escritura en forma de cadena separada por comas (p. ej. accept=".png,.jpg", como atributo estático directo).

Arrastrar y soltar + petición personalizada

Carga con arrastrar y soltar

Arrastre los archivos aquí o haga clic para subir

<script setup>
const fakeRequest = ({ file, onProgress }) =>
  new Promise((resolve) => {
    let percent = 0
    const timer = setInterval(() => {
      percent += 20
      onProgress(percent)
      if (percent >= 100) {
        clearInterval(timer)
        resolve({ url: `https://example.com/${file.name}` })
      }
    }, 200)
  })
</script>

<template>
  <!-- Carga con arrastrar y soltar -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

<script>
export default {
  methods: {
    fakeRequest({ file, onProgress }) {
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 20
          onProgress(percent)
          if (percent >= 100) {
            clearInterval(timer)
            resolve({ url: `https://example.com/${file.name}` })
          }
        }, 200)
      })
    },
  },
}
</script>

<template>
  <!-- Carga con arrastrar y soltar -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

Deshabilitado y límite de cantidad

disabled deshabilita la carga; max-count limita el número máximo de archivos que se pueden subir.

Deshabilitado / límite de cantidad

Seleccionar archivo

Seleccionar archivo

<script setup lang="ts">
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

API

LhUpload Props

Prop	Descripción	Tipo	Predeterminado
multiple	Permite la selección múltiple	boolean	false
drag	Zona de carga con arrastrar y soltar	boolean	false
disabled	Deshabilitado	boolean	false
accept	Extensiones / MIME permitidos; se admite un array (['.png', 'image/*']) o una cadena separada por comas ('.png,.jpg')	string | string[]	() => []
maxSize	Límite de tamaño por archivo (bytes)	number	[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)
maxCount	Límite de cantidad (0 significa sin límite)	number	0
request	Función de petición de carga (si no se pasa, solo se realiza la selección y validación local)	(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>	—
sx	Propiedades de diseño rápido sx	LhSxProps	—

Events

Evento	Descripción	Parámetros
change	Se dispara cuando cambia la lista de archivos (nuevo archivo, fin de la carga, archivo eliminado)	(files: LhUploadFile[])
success	Se dispara cuando se carga correctamente un archivo	(file: LhUploadFile)
error	Se dispara cuando falla la carga de un archivo	(file: LhUploadFile, reason: string)
remove	Se dispara tras eliminar un archivo	(uid: string)

Slots: default (contenido de la zona de activación).

LhUploadRequest

(options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>

Accesibilidad

• El <input type="file"> nativo está oculto visualmente pero permanece en el árbol de accesibilidad, con nombre mediante aria-label
• La zona de activación usa role="button" + tabindex y abre el selector de archivos con Enter/Space; al deshabilitarse se elimina de la interacción
• La barra de progreso usa role="progressbar" + aria-valuenow/min/max; los errores de validación se anuncian con role="alert"; el botón de eliminación de cada elemento lleva el nombre del archivo

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/upload/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhUploadProps

export interface LhUploadProps {
  /** Permite la selección múltiple */
  multiple?: boolean
  /** Zona de carga con arrastrar y soltar */
  drag?: boolean
  /** Deshabilitado */
  disabled?: boolean
  /** Extensiones / MIME permitidos: array `['.png', 'image/*']` o cadena separada por comas `'.png,.jpg'` */
  accept?: string[] | string
  /** Límite de tamaño por archivo (bytes) */
  maxSize?: number
  /** Límite de cantidad (0 significa sin límite) */
  maxCount?: number
  /** Función de petición de carga (si no se pasa, solo se realiza la selección y validación local) */
  request?: LhUploadRequest
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

LhUploadRequest _{(de @lh-ui/share/core/upload)}

/** Firma de la función de petición de carga (la proporciona quien la usa; la biblioteca no incluye ningún cliente HTTP) */
export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

LhUploadFileStatus _{(de @lh-ui/share/core/upload)}

/** Estado del archivo */
export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

LhUploadFile _{(de @lh-ui/share/core/upload)}

/** Elemento de archivo cargado */
export interface LhUploadFile {
  /** Identificador único (generado internamente o proporcionado por el usuario) */
  uid: string
  /** Nombre del archivo */
  name: string
  /** Tamaño en bytes */
  size: number
  /** Estado */
  status: LhUploadFileStatus
  /** Progreso de carga, de 0 a 100 */
  percent: number
  /** Dirección devuelta por el servidor (en caso de éxito) */
  url?: string
  /** Motivo del fallo */
  error?: string
  /** Objeto File original */
  raw?: File
}

Constantes

Las constantes públicas que utiliza este componente (en la columna «Tipo / Predeterminado» de la tabla de Props puedes pulsar el nombre de una constante para saltar hasta aquí):

LH_UPLOAD_MAX_SIZE _{(de @lh-ui/share/core/upload)}

/** Límite de tamaño predeterminado: 5 MB */
export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024