File Upload

ドラッグ＆ドロップ対応のファイル選択コンポーネントです。ユーザーは視覚的にファイルをアップロードエリアにドロップするか、クリックしてファイルを選択できます。選択されたファイルはリスト表示され、画像の場合は自動的にサムネイルが生成されます。

Basic

デフォルトはドロップゾーン（variant="dropzone"）形式です。クリックまたはドラッグ＆ドロップでファイルを選択できます。

Multiple Files

multiple 属性を付与すると、複数ファイルの同時選択が可能になります。max-files で上限数を指定することもできます。

Button Variant

スペースが限られている場合は variant="button" を使用します。

Disabled

disabled プロパティでアップロードを無効化します。

関連コンポーネント

• Input — テキスト入力フィールドコンポーネント
• Form Field — フォーム要素にラベルやバリデーションを付与するラッパーコンポーネント

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
Drag and Drop API	ドラッグ＆ドロップ	全ver	全ver	全ver	Baseline
URL.createObjectURL()	画像プレビュー	全ver	全ver	全ver	Baseline
<input type="file">	ファイル選択	全ver	全ver	全ver	Baseline

💡 ネイティブの <input type="file"> と Drag and Drop API を使用しており、モダンブラウザでフル機能が動作します。

アクセシビリティ

• WAI-ARIA:
  • ファイル選択には実際にネイティブの <input type="file"> 要素が使われます（視覚的には非表示）。この input は label Prop を指定すると aria-labelledby で <label> と関連付けられ、helpText Prop を指定すると aria-describedby でヘルプテキストと関連付けられます。
  • variant="dropzone"（既定）のドロップゾーンは role="button" を持ち、aria-label には label Prop（未指定時は dropzoneText）が設定されます。disabled 時は aria-disabled="true" が付与されます。
  • variant="button" ではネイティブの <button> 要素が使われ、disabled 時は disabled 属性と aria-disabled="true" が付与されます。
  • 各ファイルの削除ボタンはネイティブの <button> で、aria-label に「removeLabel + ファイル名」（例: Remove photo.png）が設定され、操作対象のファイルが支援技術に伝わります。
  • 装飾用の各 SVG アイコンは aria-hidden="true" で読み上げ対象から除外されます。
• キーボードナビゲーション:
  • ドロップゾーンは tabindex="0" でフォーカス可能で、Enter または Space キーでファイル選択ダイアログを開けます（disabled 時は tabindex="-1" でフォーカス順序から除外されます）。
  • 隠し <input type="file"> 自体は tabindex="-1" でフォーカス順から外れており、操作はドロップゾーン／ボタンに集約されています。
  • ボタンバリアントおよび削除ボタンはネイティブ <button> のため、Tab でフォーカスでき Enter / Space で実行できます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
accept	accept	受け入れるファイルタイプ（例: ‘image/*,.pdf’）	string	''
browseLabel	browse-label	ブラウズボタンのラベル	string	'Browse'
disabled	disabled	無効状態	boolean	false
dropzoneText	dropzone-text	ドロップゾーンのテキスト	string	'Drop files here or click to upload'
helpText	help-text	ヘルプテキスト	string	''
label	label	ラベル	string	''
maxFiles	max-files	最大ファイル数。0 で無制限	number	0
maxSize	max-size	最大ファイルサイズ（bytes）。0 で無制限	number	0
multiple	multiple	複数ファイル選択を許可するか	boolean	false
removeLabel	remove-label	削除ボタンのラベル	string	'Remove'
variant	variant	表示バリアント	"button" | "dropzone"	'dropzone'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiError	バリデーションエラー時に発火	CustomEvent<{ message: string; file?: File | undefined; }>
juiRemove	ファイル削除時に発火	CustomEvent<{ file: UploadFile; index: number; }>
juiSelect	ファイル選択時に発火	CustomEvent<{ files: File[]; }>

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"dropzone"	ドロップゾーン領域
"file-item"	ファイルリストの各アイテム
"file-list"	ファイルリストのコンテナ

---

Built with StencilJS