FileUpload

Implemented

Drag-and-drop file field — dashed drop zone with click AND keyboard paths (Enter/Space), controlled (value) or uncontrolled file list showing name + size + Remove, and accept/maxSize/maxFiles client-side validation surfaced via onError. The organism owns zero network calls — onChange hands the raw File[] to the caller. Built-in zone copy is EN/FR via locale (default en). Dormant organism (no consumer yet).

Categoryorganisms

Sourcecomponents/organisms/FileUpload/FileUpload.tsx

AI HintUse for any file-attachment field (event cover image, press kit, seating-plan import). Fully controlled via value/onChange or uncontrolled; the organism owns zero network calls — onChange hands the raw File[] to the caller, who owns upload/S3 wiring. Validation (accept MIME pattern, maxSize bytes, maxFiles count) is surfaced as message strings via onError, not thrown. For a click-only single-image slot use the ImageUploader molecule instead; this organism owns the drag-and-drop contract.

Champ fichier glisser-déposer — zone pointillée avec chemins clic ET clavier (Entrée/Espace), liste contrôlée (value) ou non contrôlée affichant nom + taille + Retirer, validation accept/maxSize/maxFiles via onError. FR-CA : « Dépôt de fichiers · Glisser-déposer · Parcourir · Retirer ».

FileUpload

Organism — Forms family (Family 3)

Zone de dépôt role=button (Entrée/Espace ouvre le sélecteur; l'input natif reste sr-only), liste de fichiers nom + taille + bouton Retirer 44px, validation côté client remontée en chaînes via onError. Aucun appel réseau — onChange remet le File[] brut à l'appelant.

Event cover image

Drag & drop a file here, or click to browse

Accepted: image/png,image/jpeg,image/webp · Max 5.0 MB

PNG, JPG or WebP — max 5 MB.

This component supports light and dark mode.

Props

Prop

Type

Default

Description

onChange*

(files: File[]) => void

—

Appelé à l'ajout, au dépôt et au retrait de fichiers.

label*

string

—

Libellé visible; nom accessible de la zone via aria-labelledby.

value

File[]

—

Liste contrôlée. Omettre pour un usage non contrôlé.

accept

string

—

Motif MIME accepté (virgules; type/* et .ext supportés).

multiple

boolean

—

Fichiers multiples (défaut false — le mono-fichier remplace la liste).

maxSize

number

—

Taille max par fichier (octets).

maxFiles

number

—

Nombre max de fichiers.

disabled

boolean

—

Désactive le contrôle (défaut false).

hint

string

—

Texte d'aide sous le contrôle.

error

string

—

Message d'erreur rendu avec role=alert (remplace l'aide).

onError

(error: string) => void

—

Callback des erreurs de validation côté client.

locale

"fr" | "en"

—

Bascule la copie intégrée de la zone et les messages (défaut en).

className

string

—

Classes additionnelles sur le wrapper racine.

id

string

—

Surcharge le field id généré (câblage label/described-by).

Props

Preview

FileUpload

Prop

Type

Required

Default

Description

onChange

(files: File[]) => void

Required

—

Fired when the user picks, drops or removes files (also the uncontrolled mutation path).

label

string

Required

—

Visible field label; also the drop zone's accessible name via aria-labelledby.

value

File[]

Optional

—

Controlled file list. Omit for uncontrolled usage.

accept

string

Optional

—

MIME accept pattern (comma-separated; supports type/* globs and .ext suffixes).

multiple

boolean

Optional

false

Allow multiple files (single-file mode replaces the list).

maxSize

number

Optional

—

Per-file size cap in bytes.

maxFiles

number

Optional

—

Maximum number of files.

disabled

boolean

Optional

false

Disable the control.

hint

string

Optional

—

Help text below the control.

error

string

Optional

—

Error message rendered with role="alert" (replaces the hint line).

onError

(error: string) => void

Optional

—

Client-side validation error callback.

locale

"fr" | "en"

Optional

'en'

Switches the built-in zone copy and validation messages (drop prompts, accepted summary, size/count hints, Remove, onError strings).

className

string

Optional

—

Additional CSS classes appended to the root wrapper div.

id

string

Optional

—

Overrides the generated field id (label/described-by wiring).

Quick use:<FileUpload />

Accessibility

ARIA rolebutton

Usage

Import

tsxSnippet

import { FileUpload } from "@epasslive/design-system"

Example 1

tsxSnippet

<FileUpload label="Event cover image" accept="image/png,image/jpeg,image/webp" maxSize={5242880} value={files} onChange={setFiles} onError={setUploadError} />

Example 2

tsxSnippet

<FileUpload label="Press kit assets" multiple maxFiles={4} maxSize={2097152} hint="PDF, PNG or MP4 — up to 4 files." onChange={setFiles} />

Anti-patterns

— Do not fetch or upload directly in the organism — onChange hands the File[] to the caller

— Do not pass onUpload/helperText — legacy Ventixe API that was never implemented here

— Do not expect preview thumbnails or per-file progress — the list shows name + size + Remove only