このサンプル コンポーネントは、画像と既定の画像をアップロードする Upload ボタンとしてコンポーネントが初めて読み込まれたとき表示されます。
Upload をクリックすると、 画像を選択するエクスプローラーがポップアップします。
選択した画像はコンポーネント内に表示されます。 同時に、リセットする必要がある場合は Remove ボタンが表示されます。
Remove ボタンをクリックすると、既定の画像が表示されます。
使用可能な対象
モデル駆動型アプリ
コード
完全なサンプル コンポーネントは、こちら からダウンロードできます。
このサンプルはイメージ選択を作成する方法を示し、マニフェストで定義されたイメージを読み込むデバイス API とリソース API を紹介します。 画像コンテンツは base64 エンコーディングで格納されており、保存して再参照できます。
resources.getResource メソッドは、コンポーネント マニフェストで定義された Web リソース名として入力を受け取り、その Web リソースを読み込みます。 コンポーネントは最初の描画で Upload ボタンと既定の画像を表示します。 画像はマニフェストの リソース ノードで定義されます。
<resources>
<code path="index.ts" order="1" />
<css path="css/TS_ImageUploadControl.css" order="1" />
<img path="img/default.png" />
<resx path="strings/TSImageUploadControl.1033.resx" version="1.0.0" />
</resources>
successCallback がトリガーされ、リソース コンテンツが successCallback に挿入されます。 画像要素 'src' でコンテンツを指定すると、既定の画像が読み込まれます。
device.pickFile メソッドは、アップロードするファイルを選択するためのダイアログ ボックスを開きます。 デスクトップではファイル エクスプローラを開き、モバイル クライアントでは写真のライブラリを開きます。
upload ボタンをクリックすると、デバイス API pickFile がトリガーして、ユーザーはファイルを選択します。 ファイルが正しく選択されると、ファイルのファイル名、ファイルの内容が successCallback に挿入されます。
注意
同じフォームまたはテーブルがレガシ Web クライアントで使用されている場合は、UX 問題がある可能性があるレガシ Web クライアントでフィールドにそのままテキスト コンポーネントが表示されます。 レガシ Web クライアントでそれを隠すために 表示 チェック ボックスをオフにして、既定のコントロールを表示しない チェック ボックスを一緒にオンにできます。
関連記事
サンプル コンポーネントをダウンロード
サンプルコンポーネントの使用方法
デバイス API コンポーネント
デバイス API
Power Apps Component Framework API リファレンス
Power Apps component framework のマニフェスト スキーマ リファレンス