dsfr_file_field

Génère un champ d'upload de fichier <input type="file"> au DSFR.

Documentation DSFR - Ajout de fichier

Usage basique

<%= f.dsfr_file_field :document %>

<div class="fr-upload-group">
  <label class="fr-label" for="usage-basique_document">Document</label>
  <input class="fr-upload" type="file" name="usage-basique[document]" id="usage-basique_document" />
</div>

Options disponibles

OptionTypeDescription
label:StringTexte personnalisé pour le label
hint:StringTexte d'aide affiché sous le label
required:BooleanAffiche une astérisque rouge
accept:StringTypes de fichiers acceptés
multiple:BooleanPermet l'upload de plusieurs fichiers

Avec texte d'aide

<%= f.dsfr_file_field :document, hint: "Formats acceptés : PDF, PNG, JPG. Taille max : 5 Mo" %>

<div class="fr-upload-group">
  <label class="fr-label" for="hint_document">Document<span class="fr-hint-text">Formats acceptés : PDF, PNG, JPG. Taille max : 5 Mo</span></label>
  <input class="fr-upload" type="file" name="hint[document]" id="hint_document" />
</div>

Champ obligatoire

<%= f.dsfr_file_field :document, required: true %>

<div class="fr-upload-group">
  <label class="fr-label" for="obligatoire_document">Document</label>
  <input class="fr-upload" required="required" type="file" name="obligatoire[document]" id="obligatoire_document" />
</div>

Avec restriction de type de fichier

<%= f.dsfr_file_field :document, accept: ".pdf,.png,.jpg" %>

<div class="fr-upload-group">
  <label class="fr-label" for="accept_document">Document</label>
  <input class="fr-upload" accept=".pdf,.png,.jpg" type="file" name="accept[document]" id="accept_document" />
</div>

Upload multiple

<%= f.dsfr_file_field :document, multiple: true %>

<div class="fr-upload-group">
  <label class="fr-label" for="multiple_document">Document</label>
  <input class="fr-upload" multiple="multiple" type="file" name="multiple[document][]" id="multiple_document" />
</div>

Champ en erreur

Affiche le champ avec un message d'erreur lorsque le modèle contient des erreurs de validation.

Document Ce champ est obligatoireDocument Le fichier doit être au format PDF, PNG ou JPG

<%= f.dsfr_file_field :document %>

<div class="fr-upload-group fr-upload-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_document">Document</label>
  </div>
  <div class="field_with_errors">
    <input class="fr-upload" type="file" name="erreur[document]" id="erreur_document" />
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Document Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Document Le fichier doit être au format PDF, PNG ou JPG</span>
  </p>
</div>