ファイルアップロードウィジェット (テーマ指定可能)
ファイルアップロードウィジェットを使用して、1 つまたは複数のファイルを ThingWorx リポジトリにアップロードできます。次のいずれかの方法で、ファイルをアップロードするようウィジェットを設定できます。
• 「ブラウズ」ボタンをクリックして、ローカルシステム上のファイルを選択します。「アップロード」ボタンをクリックすると、選択したファイルがアップロードされます。
• ローカルシステムからウィジェットのドロップ領域にファイルをドラッグします。
さらに、検証規則を設定してファイルタイプ、サイズ、量などの制限を適用することもできます。
ウィジェットの構造
ドラッグアンドドロップ
1. ファイルリポジトリセレクタ
2. ファイルドロップ領域
3. アップロードされたファイル
4. リポジトリパス
このモードでファイルをドラッグするか選択すると、DisableInstantUpload プロパティの値に基づいて、ファイルがただちにアップロードまたはリストされます。必要に応じて、AllowInstantUpload プロパティを無効にして、ボタンまたはウィジェットの Upload サービスを使用してファイルを手動でアップロードできます。「置換」ボタンも表示され、リポジトリにアップロードされているファイルを置き換えることができます。
「ブラウズ」ボタンのみ
1. ファイルリポジトリセレクタ
2. 「ブラウズ」ボタン
3. 選択されているファイル
4. リポジトリパス
インスタントアップロードの無効化
デフォルトでは、選択したファイルは自動的にリポジトリにアップロードされます。各ファイルのアップロードの進行状況を示す進行状況バーが表示されます。
ユーザーが選択したファイルをアップロードの前に確認できるようにするには、ウィジェットのプロパティ DisbaleInstantUpload および ShowUploadButton を true に設定します。ランタイムで、ユーザーは「アップロード」ボタンをクリックすることでアップロードを開始できます。必要に応じて、マッシュアップ、関数、またはウィジェットのイベントをウィジェットの Upload サービスにバインドすることで、特定の条件に基づいてアップロードを開始します。
削除ボタンの追加
削除ボタンを追加できます。ユーザーはこれを使用して、アップロードを停止し、選択したファイルをリストから除去できます。アップロードされているファイルはリストから除去されるだけで、ThingWorx リポジトリからは削除されません。リポジトリからファイルを削除するには、カスタムデータサービスを使用します。
ThingWorx リポジトリへのファイルのアップロード
デフォルトでは、ユーザーは用意されている制御を使用して、ファイルのアップロード先となるリポジトリとフォルダを選択できます。リポジトリやフォルダパスをユーザーが選択できないようにするには、プロパティ ShowRepositoryPath および ShowRepositorySelector を false に設定します。ウィジェットのプロパティ RepositoryName および Path を使用して、デフォルトのリポジトリ名とフォルダを指定できます。プラットフォームのリポジトリの詳細については、ファイルリポジトリの管理を参照してください。
ファイルサイズの検証
デフォルトでは、ユーザーはランタイムで任意のサイズのファイルをアップロードできます。「検証」パネルにあるウィジェットの MaxFileSize プロパティを使用して、アップロード可能な最大ファイルサイズを制限できます。ファイルが最大許容サイズよりも大きい場合の失敗メッセージをカスタマイズするには、プロパティ MaxFileSizeFailureTitle および MaxFileSizeFailureMessage を設定します。
アップロードサイズの検証
検証プロパティ MaxUploadSize を使用して、アップロードの合計サイズを制限できます。アップロードの合計サイズが上限を超えている場合、失敗のメッセージが表示されます。エラーメッセージをカスタマイズするには、プロパティ MaxUploadSizeFailureMessage および MaxUploadSizeFailureTitle を使用します。
ファイルの最大数
「検証」パネルにあるウィジェットの MaxFileSize プロパティを使用して、アップロード可能なファイルの最大数を制限できます。選択したファイルの数が最大数を超えると、失敗のメッセージが表示されます。エラーメッセージをカスタマイズするには、プロパティ MaxNumberOfFilesFailureMessage を使用します。
ファイルタイプの制限
AllowedFileTypes プロパティを使用して、特定のファイルフォーマットを受け入れるようにウィジェットを設定できます。複数のファイルタイプをコンマで区切って追加できます。たとえば、.pdf, .png と入力すると、PDF ファイルと PNG ファイルのみが許可されます。サポートされていないファイルタイプが追加されたときに表示されるエラーメッセージをカスタマイズするには、プロパティ AllowedFileTypesMessage および AllowedFileTypesTitle を使用します。
 |
サポートされているファイルタイプをドロップ領域のラベルにリストするようにしてください。
|
ファイルドロップ領域の設定
ファイルをドロップ領域にドラッグしたり、ラベルをクリックすることでファイル選択ダイアログボックスを開いたりできます。領域の色が自動的に変わり、ファイルをドロップできることが示されます。
次のプロパティを使用して、ドロップ領域を設定できます。
• DropZoneHeight - ドロップ領域の高さを設定します。
• DropZoneIcon - メディアエンティティをアイコンとして表示します。
• DropZoneLabel - 表示するラベルを設定します。このプロパティを使用して、サポートされているファイルタイプとサイズに関する情報を提供できます。
ウィジェットのプロパティ
次の表に、「プロパティ」パネルで使用可能なプロパティを示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か (Y/N)
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|---|
|
BrowseButtonLabel
|
「ブラウズ」ボタンのラベルを設定します。
|
STRING
|
ブラウズ
|
Y
|
Y
|
|
BrowseButtonType
|
「ブラウズ」ボタンのタイプを設定します。オプション: 「プライマリ」、「セカンダリ」、「ターシャリ」
|
STRING
|
プライマリ
|
N
|
N
|
|
ClearList
|
選択したファイルのリストをクリアするバインド可能なサービス。
|
サービス
|
該当なし
|
Y
|
N
|
|
CustomClass
|
ウィジェットの最上位の div エレメントに適用する CSS クラスを設定します。複数のクラスをスペースで区切って入力できます。
|
STRING
|
該当なし
|
Y
|
N
|
|
DisableInstantUpload
|
ファイル選択時のインスタントアップロードを無効にします。
|
BOOLEAN
|
False
|
||
|
DropZoneHeight
|
ファイルドロップ領域の高さを設定します。
|
NUMBER
|
96
|
||
|
DropZoneIcon
|
ドロップ領域内に表示するアイコンを設定します。
|
IMAGELINK
|
該当なし
|
||
|
DropZoneLabel
|
ドロップ領域のラベルを設定します。
|
STRING
|
ファイルをここにドラッグするか、クリックしてブラウズ
|
||
|
FileNames
|
選択したファイルの名前が含まれます。
|
STRING
|
該当なし
|
Y
|
N
|
|
FileUploadMode
|
ランタイムでファイルを選択する方法を指定します。ドラッグアンドドロップするか、ブラウズボタンを表示できます。
|
STRING
|
ドラッグアンドドロップ
|
N
|
N
|
|
RepositoryName
|
ウィジェットで使用するファイルリポジトリの名前。
|
THINGNAME
|
SystemRepository
|
Y
|
N
|
|
ShowRespositorySelector
|
ターゲットファイルリポジトリを編集可能にするかどうかを表示します。
|
BOOLEAN
|
True
|
N
|
N
|
|
Path
|
リポジトリ上のファイルのアップロード先フォルダのパス。
|
STRING
|
該当なし
|
Y
|
N
|
|
MultiFilesSelect
|
複数のファイル選択を有効にします。
|
BOOLEAN
|
False
|
N
|
N
|
|
ShowDataLoading
|
データのロード時にスピンアイコンを表示します。
|
BOOLEAN
|
True
|
N
|
N
|
|
Width
|
ウィジェットの幅。
|
NUMBER
|
302
|
N
|
|
|
Height
|
ウィジェットの高さ。
|
NUMBER
|
95
|
N
|
N
|
|
Visible
|
ランタイムでのウィジェットの表示/非表示を設定します。
|
True
|
True
|
N
|
N
|
|
ClearList
|
ウィジェットに追加されたファイルのリストをクリアします。
|
該当なし
|
該当なし
|
Y
|
N
|
|
DisbaleInstantUpload
|
ファイル選択後のインスタントアップロードを無効にします。false に設定した場合、ファイルはアップロードボタンをクリックした後でのみアップロードされます。
|
False
|
False
|
Y
|
N
|
|
ResetToDefaultValue
|
このウィジェットの入力をそれぞれのデフォルト値にリセットします。
|
該当なし
|
該当なし
|
Y
|
N
|
|
ShowDeleteAllButton
|
「すべて削除」ボタンが表示され、アップロードをキャンセルして、アップロードされたすべてのファイルを削除できるようになります。
|
BOOLEAN
|
False
|
N
|
N
|
|
ShowRepositoryPath
|
ユーザーがテキストフィールドを使用してリポジトリ内のパスを指定できるようにします。
|
BOOLEAN
|
True
|
N
|
N
|
|
ShowRepositorySelector
|
ファイルのアップロード先となる ThingWorx リポジトリを選択可能なドロップダウンリストを表示します。
|
BOOLEAN
|
True
|
N
|
N
|
|
ShowUploadButton
|
選択したファイルをアップロードするアップロードボタンを表示します。このプロパティは、InstantUpload が false に設定されている場合にのみ使用できます。
|
BOOLEAN
|
False
|
N
|
N
|
|
UploadComplete
|
ファイルのアップロードが完了したときにトリガーされるバイド可能なイベント。
|
該当なし
|
該当なし
|
Y
|
N
|
|
Upload
|
選択したファイルをアップロードするバインド可能なサービス。
|
サービス
|
|||
|
UploadDescription
|
アップロードするファイルについてユーザーをガイドするために使用する説明テキストを設定します。
|
該当なし
|
該当なし
|
Y
|
N
|
|
UploadDescriptionType
|
説明テキストの表示に使用するラベルのタイプ。
|
ボディ
|
ボディ
|
N
|
N
|
|
UploadStarted
|
アップロードの開始時にトリガーされるバインド可能なイベント。
|
該当なし
|
該当なし
|
Y
|
N
|
|
UploadFailed
|
ファイルのアップロードに失敗したときにトリガーされるバインド可能なイベント。
|
該当なし
|
該当なし
|
Y
|
N
|
ファイルアップロードウィジェットのデータの検証
検証をサポートしているその他のウィジェットとは異なり、ファイルアップロードでは検証および基準メッセージがサポートされていません。基準メッセージを定義し、ShowFailureMessage を有効にすることで、ValidationState が Invalid の場合に失敗メッセージを表示できます。
 |
Invalid 状態は、「スタイルプロパティ」パネルで失敗メッセージのスタイルを設定する場合にのみ使用できます。
|
共通の検証プロパティの使用の詳細については、テキストフィールドウィジェット (テーマ指定可能)を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
|
名前
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か
|
ローカライズ可能か
|
|---|---|---|---|---|---|
|
AllowedFileTypes
|
ユーザーが選択可能な、許可されるファイルタイプをコンマで区切って設定します。例: .png, .pdf, .txt
|
STRING
|
該当なし
|
Y
|
N
|
|
AllowedFileTypesMessage
|
サポートされていないファイルタイプが追加されたときに表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
AllowedFileTypesMessageDetails
|
許可されているファイルタイプをリストする、メッセージの下に表示する詳細。
|
STRING
|
Y
|
Y
|
|
|
CriteriaMessage
|
検証に失敗したとき、および検証基準で表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
CriteriaMessageDetails
|
検証基準および失敗のメッセージで表示される詳細。
|
STRING
|
Y
|
Y
|
|
|
FileRequired
|
アップロードするファイルが必要です。
|
BOOLEAN
|
False
|
Y
|
N
|
|
FileRequiredMessage
|
必要なファイルがない場合に表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
FileUploadErrorDetails
|
アップロードに失敗したファイルに関する追加の詳細を表示するメッセージ。
|
STRING
|
Y
|
Y
|
|
|
FileUploadErrorMessage
|
ファイルのアップロードに失敗したときに表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
MaxFileSize
|
個別のファイルの最大許容サイズをメガバイトで設定します。
|
NUMBER
|
該当なし
|
Y
|
N
|
|
MaxFileSizeFailureMessage
|
ファイルが最大許容ファイルサイズを超えたときに表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
MaxFileSizeFailureTitle
|
ファイルサイズが最大許容ファイルサイズを超えたときに表示されるダイアログボックスのタイトル。
|
STRING
|
Y
|
Y
|
|
|
MaxNumberOfFiles
|
アップロードリストに追加できるファイルの最大数を設定します。
|
NUMBER
|
該当なし
|
Y
|
Y
|
|
MaxNumberOfFilesFailureMessage
|
追加したファイル数が最大数を超えた場合に表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
MaxUploadSize
|
複数のファイルが選択されている場合にアップロード可能な最大許容サイズをメガバイトで設定します。
|
NUMBER
|
該当なし
|
Y
|
N
|
|
MaxUploadSizeFailureMessage
|
ファイルの合計サイズが最大許容ファイルサイズを超えたときに表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
MaxUploadSizeFailureTitle
|
ファイルの合計サイズが最大許容値を超えたときに表示されるダイアログボックスのタイトル。
|
STRING
|
Y
|
Y
|
|
|
ShowValidationFailure
|
検証に失敗したときに、失敗のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
ユーザーがランタイムでウィジェットを操作する前に検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。
|
サービス
|
該当なし
|
入力
|
N
|
|
Validate
|
ウィジェットの値が変更されたときにトリガーされるイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。
|
イベント
|
該当なし
|
Y
|
N
|
|
ValidationFailureIcon
|
検証に失敗した場合にステータスメッセージ内に表示する SVG アイコンを設定します。
|
IMAGELINK
|
cds:icon_error
|
N
|
N
|
|
ValidationOutput
|
ウィジェット検証の出力を取得します。戻り値は Undefined、Unvalidated、Valid、または Invalid です。
|
STRING
|
該当なし
|
Y
|
N
|
|
ValidationState
|
検証状態を設定するバインド可能なプロパティ。このプロパティは Undefined、Unvalidated、Valid、または Invalid に設定できます。
|
STRING
|
Undefined
|
Y
|
N
|