VueUseのuseFileDialogを使用して、file入力要素を作成する

これは、「Vue Advent Calendar 2024」21日目の記事です。

こんにちは、keigo です。今回は、VueUseのuseFileDialogを使用して、file入力要素を作成するやり方を紹介します。

https://vueuse.org/core/useFileDialog/

なぜファイル入力要素の実装でVueUseを使用するの？

ファイル入力要素にはtype=file属性を付与したinput要素を使用しますが、要素の装飾がしづらく、デザイン通りの実装をするには様々工夫が必要です。

例えば以下のデザイン通りのファイル入力要素を作成する場合、以下の点についての考慮が必要です。

• 画像を選択ボタンの中に、svgのアイコンを設置
• 画像を選択ボタンとファイル名の間にpaddingを設定

input要素のtype=file属性では、上記のような装飾を実現することができません。(記事執筆時点)
そのため、input要素を非表示にし、button要素などで見た目を再現する必要があります。

このような実装を毎回行うのは手間がかかりますが、VueUseを使用することで簡単に実装が可能です。

useFileDialogの使い方

templateには、以下のコードを記述します。

<template>
  <button type="button" @click="open">
    画像を選択
  </button>
  <p v-for="file of files" :key="file.name">
    {{ file.name }}
  </p>
</template>

先ほどの画像のようにsvgのアイコン等を設定する場合は、button要素の中に追加します。

<template>
  <button type="button" @click="open()">
    <UploadIcon />
    画像を選択
  </button>
</template>

scriptには、以下のコードを記述します。

<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'

const { files, open, onChange } = useFileDialog()

onChange((files) => {
  // 任意の処理
})
</script>

これにより、自由に装飾が可能でありながら、ファイル入力要素が作成可能となります。

まとめ

VueUseが提供するuseFileDialogを活用することで、ファイル入力要素を容易にカスタマイズできます！
VueUseは他にも様々なユーティリティを提供しているので、ご興味持たれた方はぜひご覧ください。
https://vueuse.org/