Téléversement

Piloté par un <input type="file"> natif + zone de glisser-déposer. La requête est fournie par l'utilisateur via la prop request (la bibliothèque n'a aucune dépendance d'exécution et n'embarque pas de client HTTP).

Utilisation de base

Utilisation de base

Sélectionner un fichier

<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 accepte également une écriture en chaîne séparée par des virgules (par ex. accept=".png,.jpg", écriture directe en attribut statique).

Glisser-déposer + requête personnalisée

Téléversement par glisser-déposer

Glissez les fichiers ici, ou cliquez pour téléverser

<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>
  <!-- Téléversement par glisser-déposer -->
  <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>
  <!-- Téléversement par glisser-déposer -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

Désactivé et nombre maximal

disabled désactive le téléversement ; max-count limite le nombre maximal de fichiers téléversés.

Désactivé / Nombre maximal

Sélectionner un fichier

Sélectionner un fichier

<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	Description	Type	Valeur par défaut
multiple	Autorise la sélection multiple	boolean	false
drag	Zone de téléversement par glisser-déposer	boolean	false
disabled	Désactivé	boolean	false
accept	Extensions / MIME autorisées, sous forme de tableau (['.png', 'image/*']) ou de chaîne séparée par des virgules ('.png,.jpg')	string | string[]	() => []
maxSize	Taille maximale d'un fichier (octets)	number	[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)
maxCount	Nombre maximal (0 = illimité)	number	0
request	Fonction de requête de téléversement (si elle n'est pas fournie, seule la sélection et la validation locales sont effectuées)	(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
change	Émis lorsque la liste des fichiers change (ajout de fichier, fin de téléversement, suppression de fichier)	(files: LhUploadFile[])
success	Émis après le téléversement réussi d'un fichier	(file: LhUploadFile)
error	Émis après l'échec du téléversement d'un fichier	(file: LhUploadFile, reason: string)
remove	Émis après la suppression d'un fichier	(uid: string)

Slots : default (contenu de la zone de déclenchement).

LhUploadRequest

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

Accessibilité

• Le <input type="file"> natif est masqué visuellement mais conservé dans l'arbre d'accessibilité, nommé via aria-label
• La zone de déclenchement est un role="button" + tabindex, Enter/Space ouvre la sélection de fichier, et la désactivation la retire des interactions
• La barre de progression est un role="progressbar" + aria-valuenow/min/max ; les échecs de validation sont annoncés via role="alert" ; le bouton de suppression de chaque élément est nommé par le nom du fichier

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/upload/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

LhUploadProps

export interface LhUploadProps {
  /** Autorise la sélection multiple */
  multiple?: boolean
  /** Zone de téléversement par glisser-déposer */
  drag?: boolean
  /** Désactivé */
  disabled?: boolean
  /** Extensions / MIME autorisées : tableau `['.png', 'image/*']` ou chaîne séparée par des virgules `'.png,.jpg'` */
  accept?: string[] | string
  /** Taille maximale d'un fichier (octets) */
  maxSize?: number
  /** Nombre maximal (0 = illimité) */
  maxCount?: number
  /** Fonction de requête de téléversement (si elle n'est pas fournie, seule la sélection et la validation locales sont effectuées) */
  request?: LhUploadRequest
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

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

/** Signature de la fonction de requête de téléversement (fournie par l'utilisateur, la bibliothèque n'embarque pas de client HTTP) */
export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

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

/** État d'un élément de fichier */
export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

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

/** Élément de fichier téléversé */
export interface LhUploadFile {
  /** Identifiant unique (généré en interne ou fourni par l'utilisateur) */
  uid: string
  /** Nom du fichier */
  name: string
  /** Taille en octets */
  size: number
  /** État */
  status: LhUploadFileStatus
  /** Progression du téléversement, de 0 à 100 */
  percent: number
  /** URL renvoyée par le serveur (en cas de succès) */
  url?: string
  /** Raison de l'échec */
  error?: string
  /** Objet File brut */
  raw?: File
}

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (vous pouvez cliquer sur l'entrée correspondante dans la colonne « Type / Valeur par défaut » du tableau Props pour y accéder) :

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

/** Taille maximale par défaut, 5 Mo */
export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024