useFileDialog

簡単にファイルダイアログを開く。

使用法

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

const { files, open, reset, onCancel, onChange } = useFileDialog({
  accept: 'image/*', // 画像ファイルのみを受け入れるように設定
  directory: true, // true に設定するとファイルではなくディレクトリを選択
})

onChange((files) => {
  /** ファイルに対して何かを行う */
})

onCancel(() => {
  /** キャンセル時に何かを行う */
})
</script>

<template>
  <button type="button" @click="open">
    ファイルを選択
  </button>
</template>