File Upload (BcFileUpload) ​

Zone de dépôt de fichiers drag-and-drop avec gestion de liste de fichiers via v-model.

Démo — sélection simple ​

vue
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>

<BcFileUpload
  v-model="files"
  accept=".pdf,.jpg,.png"
  hint="PDF, JPG ou PNG — 10 Mo max"
/>

Démo — sélection multiple ​

vue
<BcFileUpload
  v-model="files"
  accept=".pdf,.jpg,.png"
  :multiple="true"
  hint="Jusqu'à 5 fichiers — PDF, JPG ou PNG"
/>

Props ​

PropTypeDéfautDescription
modelValueFile[]— (requis)Liste des fichiers sélectionnés (v-model)
acceptstring""Types MIME ou extensions acceptés (ex: .pdf,.jpg)
multiplebooleanfalseAccepte plusieurs fichiers
disabledbooleanfalseDésactive la zone
ariaLabelstring"Parcourir les fichiers a televerser"Label ARIA
hintstring""Texte d'aide affiché dans la zone

Événements ​

ÉvénementPayloadDescription
update:modelValueFile[]Mise à jour de la liste (v-model)
errorstringCode d'erreur : "multiple-not-allowed"
remove{ index: number; file: File }Suppression d'un fichier de la liste

Règles d'utilisation ​

  • Toujours préciser accept pour orienter l'utilisateur vers les bons formats
  • En mode multiple, limiter à 5 fichiers max par zone pour éviter la confusion
  • Gérer la progression upload côté parent (XHR ou simulation) — le composant ne l'embarque pas
  • Afficher la limite de taille dans hint si nécessaire

BcUploadZone ​

Wrapper de BcFileUpload avec titre et slots personnalisables pour l'état vide et les items uploadés. Simplifie la composition dans les formulaires.

Démo ​

vue
<script setup>
import { ref } from 'vue'
const files = ref([])
</script>

<BcUploadZone
  v-model="files"
  title="Documents justificatifs"
  accept=".pdf,.jpg,.png"
  :multiple="true"
  hint="PDF, JPG ou PNG — 10 Mo max par fichier"
/>

Props ​

PropTypeDéfautDescription
modelValueFile[]— (requis)Liste des fichiers (v-model)
titlestring"Drop files here"Titre affiché au-dessus de la zone
acceptstring""Types MIME ou extensions autorisés
multiplebooleanfalseSélection multiple
disabledbooleanfalseDésactive la zone
ariaLabelstring"Upload files"Label ARIA de la zone
hintstring""Texte d'aide sous la zone

Events ​

EventPayloadDescription
update:modelValueFile[]Mise à jour de la liste (v-model)
errorstringCode d'erreur (type refusé, taille dépassée…)
remove{ index: number; file: File }Suppression d'un fichier

Slots ​

SlotPropsDescription
item{ file, index }Rendu custom d'un fichier uploadé
empty—Contenu custom de la zone vide (avant sélection)

Composition métier — Upload KYB docs ​

Ce pattern assemble BcUploadZone + liste de fichiers + progression + statuts.

vue
<script setup>
import { ref } from 'vue'

const files = ref([])
const queue = ref([
  { id: 'kbis', name: 'extrait_kbis_corp_alpha.pdf', size: '2.4 Mo', status: 'uploading', progress: 72 },
  { id: 'id', name: 'identite_dirigeant.jpg', size: '1.1 Mo', status: 'uploaded', progress: 100 },
])
</script>

<BcUploadZone
  v-model="files"
  accept=".pdf,.png,.jpg"
  :multiple="true"
  hint="PDF, PNG, JPG · 10 Mo max par fichier"
/>

<div v-for="item in queue" :key="item.id" class="upload-item">
  <strong>{{ item.name }}</strong>
  <span>{{ item.size }}</span>
  <span v-if="item.status === 'uploaded'">Uploadé</span>
  <BcProgress
    v-if="item.status === 'uploading'"
    :value="item.progress"
    variant="brand"
  />
</div>

Règle pratique :

  • BcUploadZone gère la sélection locale (File[]).
  • La progression (uploading, uploaded, error) reste pilotée par le parent (API/XHR).