画像アップロード コンポーネントの実装

このサンプル コンポーネントは、画像と既定の画像をアップロードする 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 のマニフェスト スキーマ リファレンス

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。