Téléchargement de fichier - DsfrFileDownload

🌟 Introduction

Le téléchargement de fichier permet à l'utilisateur de choisir un fichier à téléverser depuis son poste.

🏅 La documentation du composant téléchargement de fichier sur le DSFR

La story du téléchargement de fichier sur le storybook de VueDsfr

📐 Structure

Le téléchargement de fichier est constitué des éléments suivants :

• le format de la ressource (prop format, de type string)
• la taille de la ressource (prop size, de type string)
• le chemin vers la ressource (prop href, de type string)
• le nom de la ressource (prop download, de type string)
• le titre du lien permettant de téléchager la ressource (prop title, de type string)

🛠️ Props

nom	type	défaut	obligatoire
format	string	'JPEG'
size	string	'250 Ko'
href	string	'#'
download	string	''
title	string	' Télécharger le document'

📝 Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import { ref } from 'vue'

import DsfrFileDownload from '../DsfrFileDownload.vue'

const format = ref('PDF')
const size = ref('1Mo')
const href = ref('#')
const download = ref('')
const title = ref('Télécharger le manuel d\'utilisation du grille pain Malinox')
</script>

<template>
  <DsfrFileDownload
    :format="format"
    :size="size"
    :href="href"
    :download="download"
    :title="title"
  />
</template>

⚙️ Code source du composant

DsfrFileDownload.vue

<script lang="ts" setup>
import type { DsfrFileDownloadProps } from './DsfrFileDownload.types'

export type { DsfrFileDownloadProps }

withDefaults(defineProps<DsfrFileDownloadProps>(), {
  title: 'Télécharger le document',
  format: 'JPEG',
  size: '250 Ko',
  href: '#',
  download: '',
})
</script>

<template>
  <a
    :href="href"
    :download="download"
    class="fr-link  fr-link--download"
  > {{ title }}
    <span class="fr-link__detail">
      {{ format }} – {{ size }}
    </span>
  </a>
</template>