KvcFileSelect

ファイル選択・アップロードコンポーネントです。ドラッグ&ドロップに対応し、画像プレビューや自動アップロード機能を提供します。

ライブデモ

基本的な使い方

<template>
  <kvc-file-select v-model="files" />
</template>

<script setup>
import { ref } from 'vue'

const files = ref([])
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`File[]`	`[]`	選択されたファイルの配列（v-model）
accept	`string`	-	受け入れるファイルタイプ（例: "image/*", ".pdf"）
multiple	`boolean`	`true`	複数ファイル選択を許可
maxSize	`number`	`1073741824`	最大ファイルサイズ（バイト単位、デフォルト1GB）
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態
autoUpload	`boolean`	`false`	自動アップロード機能を有効化
uploadUrl	`string`	-	アップロード先URL（autoUpload時に必須）

イベント

イベント名	ペイロード	説明
update:modelValue	`File[]`	ファイルが変更されたときに発火
upload:success	`any`	アップロード成功時に発火
upload:error	`Error`	アップロードエラー時に発火

特徴

複数ファイル選択対応
ドラッグ&ドロップ対応
画像プレビュー表示
自動アップロード機能（kintone REST API使用）
ファイルサイズ表示
最大ファイルサイズ制限

使用例

基本的な使用

<template>
  <kvc-field label="ファイル添付">
    <kvc-file-select v-model="attachments" />
  </kvc-field>
  <p>選択されたファイル数: {{ attachments.length }}</p>
</template>

<script setup>
import { ref } from 'vue'

const attachments = ref([])
</script>

画像のみを選択

<template>
  <kvc-field label="画像アップロード">
    <kvc-file-select
      v-model="images"
      accept="image/*"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const images = ref([])
</script>

PDFファイルのみを選択

<template>
  <kvc-field label="PDF書類">
    <kvc-file-select
      v-model="pdfFiles"
      accept=".pdf"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const pdfFiles = ref([])
</script>

単一ファイル選択

<template>
  <kvc-field label="プロフィール画像">
    <kvc-file-select
      v-model="profileImage"
      accept="image/*"
      :multiple="false"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const profileImage = ref([])
</script>

ファイルサイズ制限

<template>
  <kvc-field label="添付ファイル">
    <kvc-file-select
      v-model="files"
      :max-size="5242880"
    />
    <p class="help-text">最大5MBまでアップロード可能</p>
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const files = ref([])
// maxSize: 5242880 = 5MB
</script>

kintoneへの自動アップロード

<template>
  <kvc-field label="ファイルアップロード">
    <kvc-file-select
      v-model="uploadedFiles"
      :auto-upload="true"
      upload-url="/k/v1/file.json"
      @upload:success="handleUploadSuccess"
      @upload:error="handleUploadError"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const uploadedFiles = ref([])

const handleUploadSuccess = (response) => {
  console.log('Upload success:', response)
}

const handleUploadError = (error) => {
  console.error('Upload error:', error)
}
</script>

選択されたファイル情報を表示

<template>
  <kvc-field label="ファイル選択">
    <kvc-file-select v-model="selectedFiles" />
  </kvc-field>

  <div v-if="selectedFiles.length > 0">
    <h3>選択されたファイル:</h3>
    <ul>
      <li v-for="(file, index) in selectedFiles" :key="index">
        {{ file.name }} ({{ formatFileSize(file.size) }})
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedFiles = ref([])

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
}
</script>

読み取り専用（アップロード済みファイルの表示）

<template>
  <kvc-field label="アップロード済みファイル">
    <kvc-file-select
      v-model="existingFiles"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const existingFiles = ref([
  // 既存のファイル情報
])
</script>

ファイルサイズについて

ファイルサイズはバイト単位で指定します。

1KB = 1,024 bytes
1MB = 1,048,576 bytes
1GB = 1,073,741,824 bytes

const maxSize = {
  '5MB': 5 * 1024 * 1024,      // 5,242,880
  '10MB': 10 * 1024 * 1024,    // 10,485,760
  '100MB': 100 * 1024 * 1024,  // 104,857,600
  '1GB': 1024 * 1024 * 1024    // 1,073,741,824
}

TypeScript サポート

import type { KvcFileSelectProps } from '@zygapp/kintone-vue3-component'

const props: KvcFileSelectProps = {
  modelValue: [],
  accept: 'image/*',
  multiple: true,
  maxSize: 5242880, // 5MB
  autoUpload: false,
  readOnly: false,
  disabled: false
}