Composants
Composants de formulaire
FileUpload

FileUpload

wc-file-upload

Composant d'upload de fichiers avec validation (extensions, taille, format du nom). Support du drag-drop et de l'upload multiple. Idéal pour les exercices nécessitant une soumission de fichiers (devoirs, projets, ressources, documents à analyser).

Documentation

FileUpload - Guide d'utilisation

Configuration simple

{
  "maxFiles": 1,
  "allowedExtensions": ["pdf"],
  "maxFileSize": 10485760,
  "acceptedFormats": ".pdf"
}

Exemples de configurations

Plusieurs fichiers:

{
  "maxFiles": 5,
  "allowedExtensions": ["pdf", "docx", "xlsx"],
  "maxFileSize": 52428800
}

Images uniquement:

{
  "maxFiles": 10,
  "allowedExtensions": ["jpg", "png", "gif"],
  "maxFileSize": 5242880,
  "acceptedFormats": "image/*"
}

Avec validation du nom:

{
  "maxFiles": 1,
  "allowedExtensions": ["pdf"],
  "fileNameRegex": "^[a-zA-Z0-9_-]+$"
}

Propriétés

  • maxFiles: Nombre max de fichiers (défaut: 1)
  • allowedExtensions: Extensions autorisées (défaut: [])
  • maxFileSize: Taille max en bytes (défaut: 10 MB)
  • fileNameRegex: Regex pour le nom du fichier
  • uploadedFiles: Fichiers uploadés
  • disabled: Désactiver l'upload
  • multiple: Upload multiple

Backend

Endpoint /api/upload:

@Post('upload')
@UseInterceptors(FileInterceptor('file'))
uploadFile(@UploadedFile() file: Express.Multer.File) {
  return {
    success: true,
    url: `/files/${file.filename}`,
    fileName: file.originalname,
    fileSize: file.size
  }
}

Exemple interactif

API

maxFiles
Le nombre maximum de fichiers autorisés à télécharger.
number
Default: 1
allowedExtensions
Les extensions de fichiers autorisées (ex: ["pdf", "docx", "txt"]). Si vide, tous les types sont acceptés.
Array<string>
Default: []
maxFileSize
La taille maximale autorisée par fichier en bytes (par défaut 10 MB).
number
Default: 10485760
fileNameRegex
Une regex que le nom du fichier doit respecter. Si vide, aucune validation spéciale sur le nom.
string
Default: ""
uploadedFiles
Liste des fichiers téléchargés.
Array<object>
Default: []
dragActive
Indique si une opération drag-drop est en cours.
boolean
Default: false
disabled
Désactiver l'upload de fichiers?
boolean
Default: false
multiple
Permettre l'upload de plusieurs fichiers à la fois?
boolean
Default: true
acceptedFormats
Format accepté pour l'attribut HTML accept (ex: ".pdf,.docx,.txt" ou "image/*").
string
Default: ""
css
Les classes CSS à appliquer au composant.
string
Default: ""
EvaluatorImageClicker