Bone Flow #039 - FilePicker v1.0.2

Bone Flow #039 FilePicker Class ガイドHTML class / Public API / 引数 / 実行結果

Class一覧30

1. HTML Class の使い方

このClassはJavaScriptの class {} ではありません。 HTML要素の class="" に機能Classを設定し、そのClassと1対1のPublic APIを呼び出すための宣言的な入口です。

Class一覧から使用する機能を選ぶ
HTML要素の class="" にClass名を設定する
data-bone-event でいつ呼ぶかを設定する
data-bone-args / data-bone-arg-N でAPI引数を渡す
戻り値はResult / State契約から取得する

<div class="bone-html-class-use bone-filepicker-defaults" data-bone-event="manual"></div>

Class一覧

左側の Class一覧 30件 からClassを選択すると、そのClass専用の説明・引数・HTML例・実行・Resultを表示します。

2. Class共通引数契約

HTMLの class="" は「どのPublic APIを使うか」を指定します。Public APIへ渡す引数と呼出タイミングは、以下の共通 data-bone-* 属性で指定します。

実行マーカー: 機能Classは bone-html-class-use と組み合わせて使用します。例: class="bone-html-class-use bone-bone-filepicker-defaults"。既存CSS Classを誤実行しないための共通契約です。

属性	役割	値 / Default	説明
`class`	機能Class	`bone-html-class-use bone-...-...`	`bone-html-class-use` とClass一覧の機能Classを同じ `class=""` に設定します。対応Public APIと1対1です。
`data-bone-event`	起動タイミング	`load` / click / input / change / manual 等 Default: `load`	複数指定は空白またはカンマ区切り。`manual` は自動実行せず、Bridgeの `invoke()` から実行します。
`data-bone-args`	引数一括指定	JSON Array	Public APIの引数順そのままのJSON配列です。例: `["$self","$value",{}]`
`data-bone-arg-N`	引数個別指定	Nは0始まり	`data-bone-arg-0`, `data-bone-arg-1` のように1引数ずつ指定します。一括指定より個別値を補完できます。
`data-bone-once`	イベント1回限定	`true` / Default: false	click等のイベント監視を1回だけ実行したい場合に指定します。
`data-bone-append-result`	Element戻り値	`false` でappend停止 Default: append	Public APIがElementを返した場合、既定ではClass設定要素へappendします。
`data-bone-throw`	Debug再throw	`true` / Default: false	Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。

特殊値

値	解決内容
`$self`	Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
`$event`	Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
`$value`	input / textarea / select等の現在の value を渡します。
`$checked`	checkbox / radio等の現在の checked(Boolean)を渡します。
`$text`	Classを設定した要素の textContent を渡します。
`$dataset`	Classを設定した要素の dataset を通常Objectとして渡します。
`$files`	file input の FileList を渡します。
`$selector:...`	...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
`$id:...`	...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
`$global:...`	window / globalThis上の指定名の値を渡します。
`$handler:...`	window / globalThis上の指定名のFunctionをコールバック引数として渡します。

引数の優先順

data-bone-args で配列を読み込み、未指定位置を data-bone-arg-N と自動補完（第1引数のelement系は $self、event系は $event）で埋めます。

3. Result / State 契約

Class経由のPublic API実行結果は、Class設定要素自身へ保存されます。成功・失敗をHTMLとEventの両方から確認できます。

結果	内容	用途
`element.__boneClassResult`	Public APIの生の戻り値	JavaScript側で元のObject / Element / primitiveをそのまま参照します。
`data-bone-class-status`	`ok` / `error`	HTML属性だけで直近のClass実行成否を確認します。
`data-bone-class-result`	戻り値のserialize結果	DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。
`bone-html-class-result`	成功CustomEvent	`detail` に componentId / className / api / value を持ちます。
`bone-html-class-error`	失敗CustomEvent	`detail` に componentId / className / api / error を持ちます。

このガイドRuntime実行結果をClass別画面に表示

左のClass一覧からClassを選択し「このClassを実行」を押すと、実Public APIのStatus / Resultを表示します。

bone-filepicker-defaults

BoneFilePicker.defaults の公開機能をHTML Classから呼び出します。

HTML Class	`bone-filepicker-defaults`
対応Public API	`BoneFilePicker.defaults`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
引数なし。Classの起動だけでAPIを呼び出します。

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-defaults" data-bone-event="manual"></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-normalize-options

設定をFilePickerの正式契約に沿う形へ正規化します。

HTML Class	`bone-filepicker-normalize-options`
対応Public API	`BoneFilePicker.normalizeOptions`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-normalize-options" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-normalize-metadata

metadataをFilePickerの正式契約に沿う形へ正規化します。

HTML Class	`bone-filepicker-normalize-metadata`
対応Public API	`BoneFilePicker.normalizeMetadata`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-normalize-metadata" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-metadata-from-file

BoneFilePicker.metadataFromFile の公開機能をHTML Classから呼び出します。

HTML Class	`bone-filepicker-metadata-from-file`
対応Public API	`BoneFilePicker.metadataFromFile`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`file`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-metadata-from-file" data-bone-event="manual" data-bone-args='[null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-matches-accept

BoneFilePicker.matchesAccept の公開機能をHTML Classから呼び出します。

HTML Class	`bone-filepicker-matches-accept`
対応Public API	`BoneFilePicker.matchesAccept`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`fileMeta`	Object	`data-bone-arg-0` または `data-bone-args[0]`	`{}`
1	`accept`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-matches-accept" data-bone-event="manual" data-bone-args='[{},null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-validate-value

FilePickerの入力・状態を検証し、Validation結果を返します。

HTML Class	`bone-filepicker-validate-value`
対応Public API	`BoneFilePicker.validateValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`value`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-validate-value" data-bone-event="manual" data-bone-args='[null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-inspect-untrusted-value

FilePickerの入力・状態を検査し、診断情報を返します。

HTML Class	`bone-filepicker-inspect-untrusted-value`
対応Public API	`BoneFilePicker.inspectUntrustedValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`value`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-inspect-untrusted-value" data-bone-event="manual" data-bone-args='[null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-normalize-bone

BoneをFilePickerの正式契約に沿う形へ正規化します。

HTML Class	`bone-filepicker-normalize-bone`
対応Public API	`BoneFilePicker.normalizeBone`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-normalize-bone" data-bone-event="manual" data-bone-args='[null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-create

FilePickerの新しい要素またはRuntimeオブジェクトを生成します。

HTML Class	`bone-filepicker-create`
対応Public API	`BoneFilePicker.create`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`boneInput`	Object	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`optionsInput`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-create" data-bone-event="manual" data-bone-args='[null,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-destroy

FilePickerの対象インスタンスを破棄し、関連状態を解放します。

HTML Class	`bone-filepicker-destroy`
対応Public API	`BoneFilePicker.destroy`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-destroy" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-input

FilePickerの「Input」を取得します。

HTML Class	`bone-filepicker-get-input`
対応Public API	`BoneFilePicker.getInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-input" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-drop-zone

FilePickerの「Drop Zone」を取得します。

HTML Class	`bone-filepicker-get-drop-zone`
対応Public API	`BoneFilePicker.getDropZone`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-drop-zone" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-options

FilePickerの「Options」を取得します。

HTML Class	`bone-filepicker-get-options`
対応Public API	`BoneFilePicker.getOptions`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-options" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-value

FilePickerの「Value」を取得します。

HTML Class	`bone-filepicker-get-value`
対応Public API	`BoneFilePicker.getValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-value" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-editing-value

FilePickerの「Editing Value」を取得します。

HTML Class	`bone-filepicker-get-editing-value`
対応Public API	`BoneFilePicker.getEditingValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-editing-value" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-files

FilePickerの「Files」を取得します。

HTML Class	`bone-filepicker-get-files`
対応Public API	`BoneFilePicker.getFiles`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-files" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-selection-state

FilePickerの「Selection State」を取得します。

HTML Class	`bone-filepicker-get-selection-state`
対応Public API	`BoneFilePicker.getSelectionState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-selection-state" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-set-value

FilePickerの「Value」を設定します。

HTML Class	`bone-filepicker-set-value`
対応Public API	`BoneFilePicker.setValue`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`metadata`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`
2	`options`	Object	`data-bone-arg-2` または `data-bone-args[2]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-set-value" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,{},{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-apply-joint-input

FilePickerへ指定内容を適用します。

HTML Class	`bone-filepicker-apply-joint-input`
対応Public API	`BoneFilePicker.applyJointInput`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`packet`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-apply-joint-input" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,null]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-clear

FilePickerの指定状態・内容をクリアします。

HTML Class	`bone-filepicker-clear`
対応Public API	`BoneFilePicker.clear`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-clear" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-reset

FilePickerを既定またはcommit済み状態へ戻します。

HTML Class	`bone-filepicker-reset`
対応Public API	`BoneFilePicker.reset`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-reset" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-commit

FilePickerの現在値を正式値としてcommitします。

HTML Class	`bone-filepicker-commit`
対応Public API	`BoneFilePicker.commit`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`source`	String / API許容値	`data-bone-arg-1` または `data-bone-args[1]`	`"html-class"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-commit" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,&quot;html-class&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-build-output

FilePickerで使用する出力・定義オブジェクトを構築します。

HTML Class	`bone-filepicker-build-output`
対応Public API	`BoneFilePicker.buildOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`source`	String / API許容値	`data-bone-arg-1` または `data-bone-args[1]`	`"html-class"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-build-output" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,&quot;html-class&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-connect-output

FilePickerの接続・出力先を接続状態へ変更します。

HTML Class	`bone-filepicker-connect-output`
対応Public API	`BoneFilePicker.connectOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-connect-output" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-disconnect-output

FilePickerの接続・出力先を切断状態へ変更します。

HTML Class	`bone-filepicker-disconnect-output`
対応Public API	`BoneFilePicker.disconnectOutput`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-disconnect-output" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-set-output-target-ready

FilePickerの「Output Target Ready」を設定します。

HTML Class	`bone-filepicker-set-output-target-ready`
対応Public API	`BoneFilePicker.setOutputTargetReady`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`ready`	Boolean	`data-bone-arg-1` または `data-bone-args[1]`	`true`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-set-output-target-ready" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,true]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-clear-output-block

FilePickerの指定状態・内容をクリアします。

HTML Class	`bone-filepicker-clear-output-block`
対応Public API	`BoneFilePicker.clearOutputBlock`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-clear-output-block" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-get-output-state

FilePickerの「Output State」を取得します。

HTML Class	`bone-filepicker-get-output-state`
対応Public API	`BoneFilePicker.getOutputState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-get-output-state" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-set-options

FilePickerの「Options」を設定します。

HTML Class	`bone-filepicker-set-options`
対応Public API	`BoneFilePicker.setOptions`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`patch`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-set-options" data-bone-event="manual" data-bone-args='[&quot;$self&quot;,{}]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

bone-filepicker-sync-parent-style

BoneFilePicker.syncParentStyle の公開機能をHTML Classから呼び出します。

HTML Class	`bone-filepicker-sync-parent-style`
対応Public API	`BoneFilePicker.syncParentStyle`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

引数

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`

引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。

HTML使用例

<div class="bone-html-class-use bone-filepicker-sync-parent-style" data-bone-event="manual" data-bone-args='[&quot;$self&quot;]'></div>

実UI / Class実行

実行引数（JSON配列）

下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。

Demo Host

Result / State

StatusNOT RUN

このClassはまだ実行していません。

現在ページでの使用状況

Class設定要素0最終状態NOT RUN

使用コンポーネント

プロパティ設定

FilePicker固有

共通Input UI

アクティブ時の枠Effect

FilePicker Preview / API

Untrusted IN / Security Test

接続イメージ

OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration

Smoke Test / Validation Report

Smoke Test 結果NOT RUN

Validation 結果NOT RUN

コンポーネント完了管理