Skip to main content
View as Markdown

Téléversements de fichiers de formulaire

Les formulaires peuvent collecter des fichiers — CV, factures, photos, documents — et les persister dans votre propre stockage plutôt que dans un CDN tiers. Les champs de pièce jointe affichent un sélecteur de fichiers (et une zone de glisser-déposer optionnelle), valident le type et la taille avant le téléversement, montrent la progression et les aperçus, et soumettent un objet de métadonnées canonique { url, name, size, mimeType }. Les fichiers atterrissent dans une destination app.buckets[] configurée sur votre stockage S3, disque local ou base de données.

buckets:
  - name: applications
    default: true
    backend: s3
    config: { bucket: $env.S3_BUCKET, region: us-east-1 }

forms:
  - id: 1
    name: apply
    title: Job Application
    path: /apply
    submitTo: { table: applications }
    fields:
      - { kind: standalone, name: full_name, inputType: single-line-text, required: true }
      - kind: standalone
        name: resume
        inputType: attachment
        label: Resume
        required: true
        accept: 'application/pdf,.doc,.docx'
        maxFileSize: 10485760 # 10 MB
        dropZone: true

Configuration du champ de pièce jointe

Le comportement de pièce jointe se configure de la même manière sur les deux types de champs : un champ kind: standalone avec inputType: attachment, ou un champ kind: table-field dont la colonne sous-jacente est single-attachment / multiple-attachments. Les propriétés de téléversement sont partagées.

Propriété Description
accept Types MIME ou extensions séparés par des virgules restreignant la boîte de dialogue de fichiers (par ex. image/*, application/pdf, .doc,.docx).
maxFileSize Taille maximale en octets par fichier. Les fichiers plus volumineux sont rejetés avec une erreur en ligne avant le début du téléversement.
maxFiles Nombre maximal de fichiers (champs multi-fichiers uniquement). En sélectionner davantage affiche une erreur en ligne.
dropZone Affiche une zone de glisser-déposer à côté du sélecteur, acceptant les mêmes fichiers.

Liaison au bucket

La destination de stockage provient de app.buckets[]. Un formulaire hérite d'un bucket par défaut : le bucket dont l'indicateur default: true est défini, ou le seul bucket lorsqu'un seul est défini. Les fichiers y sont téléversés à la soumission, et la charge utile du formulaire porte les métadonnées canoniques de chaque fichier. Les surcharges de bucket par champ sont réservées à une version ultérieure.

buckets:
  - name: documents
    default: true
    backend: local
    config: { path: ./storage/documents }

forms:
  - id: 2
    name: invoice-upload
    title: Upload Invoice
    submitTo: { automation: process-invoice }
    fields:
      - { kind: standalone, name: vendor, inputType: single-line-text, required: true }
      - kind: standalone
        name: document
        inputType: attachment
        accept: 'application/pdf,image/*'
        maxFileSize: 20971520 # 20 MB
        dropZone: true

Expérience de téléversement

Le champ de pièce jointe affiche une expérience de téléversement complète :

Comportement Description
Filtre de type accept restreint à la fois la boîte de dialogue du navigateur et le glisser-déposer ; les fichiers non conformes affichent une erreur en ligne.
Validation de taille maxFileSize rejette les fichiers trop volumineux avant le début du téléversement.
Indicateur de progression Une barre de progression ou un indicateur de chargement est affiché pendant le téléversement de chaque fichier.
Aperçu Les fichiers image affichent une vignette après le téléversement ; les fichiers non image affichent le nom + la taille.
Suppression Les fichiers sélectionnés peuvent être supprimés avant la soumission (accessible au clavier) ; en supprimer un parmi plusieurs n'affecte pas les autres.
Application de l'obligation Un champ de pièce jointe required sans fichier bloque la soumission avec une erreur en ligne.

Forme des métadonnées de fichier

Lorsque le formulaire est soumis, chaque valeur de pièce jointe est normalisée en un objet de métadonnées canonique — la même forme consommée par submitTo.table, les déclencheurs submitTo.automation, et la charge utile data du registre form_submissions.

type FileMetadata = {
  url: string // canonical URL into the bucket (signed when the bucket is private)
  name: string // original filename
  size: number // bytes
  mimeType: string // detected MIME type
}

Un champ simple soumet FileMetadata | null ; un champ multiple soumet FileMetadata[]. Acheminer le téléversement vers une automatisation rend les mêmes métadonnées disponibles dans la charge utile du déclencheur — par exemple pour exécuter une extraction par IA sur {{trigger.data.document.url}}.

Pages associées

  • Champs de formulaire — les types de champs que les téléversements de pièces jointes étendent.
  • Présentation des formulaires — les cibles submitTo qui reçoivent les métadonnées de fichier.
  • Soumissions — métadonnées de fichier stockées dans la charge utile data du registre.
  • Buckets — configurer les backends de stockage S3, local et base de données.