BjUpload

Zone de téléversement React avec glisser-déposer, libellé, message de validation et liste des fichiers sélectionnés.

Utilisation

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  function onFiles(files: FileList | null) {
    console.log(files)
  }
  return (
    <BjUpload
      label="Pièce justificative"
      hint="PDF ou image, 5 Mo maximum"
      accept=".pdf,image/*"
      onChange={onFiles}
    />
  )
}

Aperçu

Pièce justificativePDF ou image, 5 Mo maximum

Glissez un fichier ou cliquez pour parcourir

Erreur et message

error et message sous la zone.

Justificatif

Glissez un fichier ou cliquez pour parcourir

Le fichier est trop volumineux.

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  return (
    <BjUpload
      label="Justificatif"
      error
      message="Le fichier est trop volumineux."
      onChange={() => {}}
    />
  )
}

Fichiers multiples

multiple avec accept pour plusieurs fichiers.

PhotosJusqu'à 5 images

Glissez un fichier ou cliquez pour parcourir

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  return (
    <BjUpload
      label="Photos"
      hint="Jusqu’à 5 images"
      accept="image/*"
      multiple
      onChange={(files) => console.log(files?.length)}
    />
  )
}

Texte et icône

text et icon personnalisent la zone.

Déposez votre CV ici

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  return (
    <BjUpload
      text="Déposez votre CV ici"
      icon="ri-file-upload-line"
      accept=".pdf"
      onChange={() => {}}
    />
  )
}

Combinaisons

label, hint, accept, multiple, error et onChange ensemble.

Pièces jointesPDF, 10 Mo max par fichier

Ajouter des PDF

Au moins un PDF requis.

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  return (
    <BjUpload
      label="Pièces jointes"
      hint="PDF, 10 Mo max par fichier"
      accept=".pdf"
      multiple
      error
      message="Au moins un PDF requis."
      text="Ajouter des PDF"
      icon="ri-attachment-2"
      onChange={(files) => {
        if (files) console.log(Array.from(files).map((f) => f.name))
      }}
    />
  )
}

Callback onChange

onChange reçoit le FileList ou null après sélection ou dépôt.

import { BjUpload } from '@flrxnt/dsbj/react'

export default function Example() {
  function handleFiles(files: FileList | null) {
    if (!files?.length) return
    for (const file of Array.from(files)) {
      console.log(file.name, file.size)
    }
  }
  return <BjUpload label="Import" accept="image/*" onChange={handleFiles} />
}

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`	Si vrai, autorise plusieurs fichiers.
`error`	Si vrai, applique 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 la zone (défaut ri-upload-2-line).
`onChange`	Appelé avec le FileList après sélection ou dépôt.
`className`	Classe CSS sur le conteneur bj-upload-group.