BjUpload

Zone de téléversement Vue avec glisser-déposer, libellé, aide, accept, fichiers multiples, message d’erreur, texte et icône personnalisables, slot uploadHint et événement change.

Utilisation

<script setup>
import { BjUpload } from '@flrxnt/dsbj/vue'

function onFiles(files: FileList | null) {
  console.log(files)
}
</script>

<template>
  <BjUpload
    label="Pièce justificative"
    hint="PDF ou image, 5 Mo maximum"
    accept=".pdf,image/*"
    @change="onFiles"
  />
</template>

Aperçu

Pièce justificativePDF ou image, 5 Mo maximum

Glissez un fichier ou cliquez pour parcourir

Événement change

Émis avec la FileList du input après sélection ou dépôt.

<script setup lang="ts">
import { BjUpload } from '@flrxnt/dsbj/vue'

function onFiles(files: FileList | null) {
  if (!files?.length) return
  console.log([...files].map(f => f.name))
}
</script>

<template>
  <BjUpload label="Document" @change="onFiles" />
</template>

Fichiers multiples

Photos

Glissez une ou plusieurs images

<BjUpload
  label="Photos"
  :multiple="true"
  accept="image/*"
  text="Glissez une ou plusieurs images"
/>

Erreur et message

Glissez un fichier ou cliquez pour parcourir

Le fichier doit être un PDF.

<BjUpload
  label="CV"
  accept=".pdf"
  :error="true"
  message="Le fichier doit être un PDF."
/>

Texte et icône

Avatar

Choisir une image de profil

<BjUpload
  label="Avatar"
  text="Choisir une image de profil"
  icon="ri-image-add-line"
/>

Slot uploadHint

Contenu affiché dans .bj-upload__hint sous le texte principal.

Pièce d’identité

Glissez un fichier ou cliquez pour parcourirFormats : JPG, PNG — max. 2 Mo

<BjUpload label="Pièce d’identité" accept="image/*">
  <template #uploadHint>Formats : JPG, PNG — max. 2&nbsp;Mo</template>
</BjUpload>

Combinaison (accept + multiple + hint)

<BjUpload
  label="Pièces jointes"
  hint="Plusieurs fichiers possibles"
  accept=".pdf,.doc,.docx"
  :multiple="true"
  :error="false"
  @change="onFiles"
>
  <template #uploadHint>Taille max. 10&nbsp;Mo par fichier</template>
</BjUpload>

Props

Prop	Description
`label`	Libellé au-dessus de la zone.
`hint`	Texte d’aide sous le libellé.
`accept`	Attribut accept du input file (types MIME ou extensions).
`multiple`	Autorise plusieurs fichiers.
`error`	Met la zone en état d’erreur (bj-upload-group--error).
`message`	Message sous la zone (couleur selon error).
`text`	Texte principal dans la zone (défaut : invitation à déposer ou parcourir).
`icon`	Classe d’icône Remix dans .bj-upload__icon (défaut ri-upload-2-line).