Formulaires

Dépôt de fichier

إيداع ملفFile upload

Stablesrc/dsm/components/file-upload.tsx
Zone de dépôt pour joindre un ou plusieurs justificatifs à une démarche : glisser-déposer ou sélection classique, avec la liste des fichiers choisis, leur taille et un bouton de retrait. L'aide sur les formats et la taille maximale se génère automatiquement à partir de `accept` et `maxSizeMb`.

Import

import { FileUpload } from "@/dsm/components/file-upload";

Exemples

Simple

Dépôt d'un justificatif avec formats et taille maximale affichés automatiquement.

LTR

Fichiers multiples

Plusieurs fichiers déposés successivement, listés avec leur taille.

LTR

Erreur

Zone de dépôt en état d'erreur.

LTR

Usage

Quand l'utiliser

  • Utilisez `FileUpload` pour tout justificatif à joindre à un dossier administratif (CNIE, justificatif de domicile, photo d'identité).
  • Renseignez `accept` et `maxSizeMb` pour que l'aide affichée corresponde exactement aux contraintes réelles côté serveur.
  • Utilisez `multiple` lorsque plusieurs fichiers du même type peuvent être joints (ex. plusieurs pages d'un même document).

Quand ne pas l'utiliser

  • N'utilisez pas `FileUpload` pour une image de profil unique avec recadrage : un composant dédié à l'avatar est plus adapté.
  • N'omettez pas `maxSizeMb` si le serveur refuse les fichiers trop lourds : l'usager doit connaître la limite avant de tenter l'envoi.

Accessibilité & langues

Accessibilité

  • L'entrée de fichier réelle est visuellement masquée (`dsm-sr-only`) mais reste au clavier grâce au `<label>` qui l'enveloppe entièrement.
  • Chaque fichier retiré déclenche `onFilesChange` avec la liste à jour, permettant de synchroniser un compteur ou une validation externe.
  • Le bouton de retrait de chaque fichier porte un `aria-label` (« Retirer ») car il n'affiche qu'une icône.

RTL & multilingue

  • La liste des fichiers et leurs boutons de retrait suivent l'ordre logique du DOM ; aucune classe directionnelle nécessaire.

Propriétés

FileUpload
PropriétéTypeDéfautDescription
label*ReactNode—Libellé de la zone de dépôt.
acceptstring—Extensions ou types MIME acceptés (ex. `.pdf,.jpg,.png`) ; alimente aussi l'aide affichée.
maxSizeMbnumber—Taille maximale par fichier, affichée dans l'aide (ex. « 5 Mo max »).
multipleboolean—Autorise le dépôt de plusieurs fichiers.
errorReactNode—Message d'erreur affiché sous la liste des fichiers.
onFilesChange(files: File[]) => void—Appelé après chaque ajout ou retrait de fichier.

Composants liés