Upload アップロード

ネイティブな <input type="file"> をドライブにしたドラッグエリア付きコンポーネントです。リクエストは使用側が request prop 経由で提供します（ライブラリはランタイム依存をゼロにし、HTTP クライアントを内蔵しません）。

基本的な使い方

ファイルを選択

vue

<script setup lang="ts">
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

accept はカンマ区切りの文字列形式もサポートしています（例：accept=".png,.jpg"。静的プロパティとして直接記述する場合）。

ドラッグとカスタムリクエスト

ここにファイルをドラッグするか、クリックしてアップロード

vue

<script setup>
const fakeRequest = ({ file, onProgress }) =>
  new Promise((resolve) => {
    let percent = 0
    const timer = setInterval(() => {
      percent += 20
      onProgress(percent)
      if (percent >= 100) {
        clearInterval(timer)
        resolve({ url: `https://example.com/${file.name}` })
      }
    }, 200)
  })
</script>

<template>
  <!-- ドラッグアップロード -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

vue

<script>
export default {
  methods: {
    fakeRequest({ file, onProgress }) {
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 20
          onProgress(percent)
          if (percent >= 100) {
            clearInterval(timer)
            resolve({ url: `https://example.com/${file.name}` })
          }
        }, 200)
      })
    },
  },
}
</script>

<template>
  <!-- ドラッグアップロード -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

無効化と数量上限

disabled でアップロードを無効化します；max-count でアップロード可能なファイル数の上限を設定します。

ファイルを選択

vue

<script setup lang="ts">
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

API

LhUpload Props

プロパティ	説明	型	デフォルト値
multiple	複数選択を許可する	`boolean`	`false`
drag	ドラッグアップロードエリア	`boolean`	`false`
disabled	無効化	`boolean`	`false`
accept	許可する拡張子 / MIME。配列（`['.png', 'image/*']`）とカンマ区切り文字列（`'.png,.jpg'`）のどちらでも可	`string \| string[]`	`() => []`
maxSize	1 ファイルあたりのサイズ上限（バイト）	`number`	`[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)`
maxCount	数量上限（0 は無制限）	`number`	`0`
request	アップロードリクエスト関数（未指定時はローカルでの選択とバリデーションのみ行う）	`(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント名	説明	コールバック引数
change	ファイルリストが変化した時に発火（ファイル追加、アップロード終了、ファイル削除後）	`(files: LhUploadFile[])`
success	1 つのファイルのアップロード成功後に発火	`(file: LhUploadFile)`
error	1 つのファイルのアップロード失敗後に発火	`(file: LhUploadFile, reason: string)`
remove	ファイルの削除後に発火	`(uid: string)`

スロット：default（トリガーエリアの内容）。

LhUploadRequest

(options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>

アクセシビリティ

ネイティブな <input type="file"> は視覚的に隠しつつアクセシビリティツリーには残し、aria-label で名前を付けます
トリガーエリアは role="button" + tabindex + Enter/Space でファイル選択を開き、無効時はインタラクションから外します
プログレスバーは role="progressbar" + aria-valuenow/min/max です。バリデーション失敗は role="alert" で読み上げ、各項目の削除ボタンにはファイル名による名前が付きます

型定義

本コンポーネントが外部にエクスポートする TypeScript の型構造は以下の通りです（packages/components/upload/src/types.ts と @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義を表示します。プロパティの説明は上記の Props 表を参照してください）：

LhUploadProps

export interface LhUploadProps {
  /** 複数選択を許可する */
  multiple?: boolean
  /** ドラッグアップロードエリア */
  drag?: boolean
  /** 無効化 */
  disabled?: boolean
  /** 許可する拡張子 / MIME：配列 `['.png', 'image/*']` またはカンマ区切り文字列 `'.png,.jpg'` */
  accept?: string[] | string
  /** 1 ファイルあたりのサイズ上限（バイト） */
  maxSize?: number
  /** 数量上限（0 は無制限） */
  maxCount?: number
  /** アップロードリクエスト関数（未指定時はローカルでの選択とバリデーションのみ行う） */
  request?: LhUploadRequest
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhUploadRequest _{（@lh-ui/share/core/upload より）}

/** アップロードリクエスト関数のシグネチャ（使用側が提供する。ライブラリは HTTP クライアントを内蔵しない） */
export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

LhUploadFileStatus _{（@lh-ui/share/core/upload より）}

/** ファイル項目の状態 */
export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

LhUploadFile _{（@lh-ui/share/core/upload より）}

/** アップロードされるファイル項目 */
export interface LhUploadFile {
  /** 一意識別子（内部生成またはユーザー提供） */
  uid: string
  /** ファイル名 */
  name: string
  /** サイズ（バイト） */
  size: number
  /** 状態 */
  status: LhUploadFileStatus
  /** アップロード進捗 0-100 */
  percent: number
  /** サーバーが返した URL（成功時） */
  url?: string
  /** 失敗理由 */
  error?: string
  /** 元の File オブジェクト */
  raw?: File
}

定数

本コンポーネントが使用する公開定数は以下の通りです（Props 表の「型 / デフォルト値」列で同名のエントリーをクリックするとここへジャンプします）：

LH_UPLOAD_MAX_SIZE _{（@lh-ui/share/core/upload より）}

/** デフォルトのサイズ上限 5MB */
export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024

Upload アップロード ​

基本的な使い方 ​

ドラッグとカスタムリクエスト ​

無効化と数量上限 ​

API ​

LhUpload Props ​

Events ​

LhUploadRequest ​

アクセシビリティ ​

型定義 ​

定数 ​