Documentation du composant `DsfrFileUpload`

🌟 Introduction

Bienvenue dans la documentation du composant DsfrFileUpload. Ce composant est l'équivalent numérique d'une balade dans les ruelles pittoresques de Montmartre, mais pour télécharger vos fichiers. Que ce soit pour des photos de vacances ou des documents importants, DsfrFileUpload rend le processus simple et élégant.

🛠️ Props

Nom	Type	Défaut	Description
`id`	`Function`	`() => getRandomId(...)`	Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré.
`label`	`string`	`'Ajouter un fichier'`	Libellé pour le bouton de téléchargement de fichier.
`accept`	`Function`	`() => []`	Types de fichiers acceptés, spécifiés sous forme d'un tableau de chaînes de caractères.
`hint`	`string`	`''`	Texte d'indice pour guider l'utilisateur.
`validMessage`	`string`	`''`	Message indiquant que le fichier téléchargé est valide.
`error`	`string`	`''`	Message d'erreur à afficher en cas de problème lors du téléchargement.
`modelValue`	`string`	`''`	Valeur liée au modèle de l'input de téléchargement de fichier.

📡 Events

Nom	Description
`update:modelValue`	Événement émis lors de la mise à jour de la valeur du modèle liée au fichier.
`change`	Événement émis lors du changement du fichier sélectionné.

📝 Exemples

Voici comment vous pourriez utiliser DsfrFileUpload :

DémoDsfrFileUploadDemo.vue

vue

<script lang="ts" setup>
import DsfrFileUpload from '../DsfrFileUpload.vue'

const handleFileChange = (files: FileList) => {
  console.log(files) // eslint-disable-line no-console
}
</script>

<template>
  <div class="fr-container fr-my-2v">
    <DsfrFileUpload
      label="Télécharger une photo"
      hint="Formats acceptés : .jpg, .png"
      :accept="['.jpg', '.png']"
      @change="handleFileChange"
    />
    (regardez la console pour voir les fichiers sélectionnés)
  </div>
</template>

⚙️ Code source du composant

DsfrFileUpload.vue

vue

<script lang="ts" setup>
import { getRandomId } from '../../utils/random-utils'

import type { DsfrFileUploadProps } from './DsfrFileUpload.types'

export type { DsfrFileUploadProps }

withDefaults(defineProps<DsfrFileUploadProps>(), {
  id: () => getRandomId('file-upload'),
  label: 'Ajouter un fichier',
  accept: () => [],
  hint: '',
  validMessage: '',
  error: '',
  modelValue: '',
})

const emit = defineEmits<{
  (e: 'update:modelValue', payload: string): void
  (e: 'change', payload: FileList): void
}>()

const onChange = ($event: InputEvent) => {
  emit('update:modelValue', ($event.target as HTMLInputElement)?.value)
  emit('change', ($event.target as (InputEvent['target'] & { files: FileList }))?.files)
}
</script>

<template>
  <div
    class="fr-upload-group"
    :class="{
      'fr-upload-group--error': error,
      'fr-upload-group--valid': validMessage,
      'fr-upload-group--disabled': disabled,
    }"
  >
    <label
      class="fr-label"
      :for="id"
    >
      {{ label }}
      <span
        v-if="'required' in $attrs && $attrs.required !== false"
        class="required"
      >&nbsp;*</span>

      <span
        v-if="hint"
        class="fr-hint-text"
      >{{ hint }}</span>
    </label>
    <input
      :id="id"
      class="fr-upload"
      type="file"
      :aria-describedby="error || validMessage ? `${id}-desc` : undefined"
      v-bind="$attrs"
      :value="modelValue"
      :disabled="disabled"
      :aria-disabled="disabled"
      :accept="accept.join(',')"
      @change="onChange($event as InputEvent)"
    >
    <div
      v-if="error || validMessage"
      class="fr-messages-group"
    >
      <p
        v-if="error"
        :id="`${id}-desc`"
        class="fr-error-text  fr-mt-3v"
      >
        {{ error ?? validMessage }}
      </p>
    </div>
  </div>
</template>

Documentation du composant DsfrFileUpload ​

🌟 Introduction ​

🛠️ Props ​

📡 Events ​