Power Apps Portals のフォームに添付ファイル（画像）をアップロードさせる方法

向井です。

**Power Apps Portalsのフォームに添付ファイルをアップロードさせる方法**をご紹介します。

##今回の前提条件
・認証ユーザーにフォーム入力をさせる。その際に画像を添付させたい。
・データソースはMicrosoft Detaverse(旧：CDS）。あらかじめエンティティは作成しておく。
・入力されたデータはモデル駆動型アプリから参照

※③からが難しいと思われるところなので、①②は簡単に記します。


#①入力フォームの作成
あらかじめエンティティを作成しておきます。（今回は「商品情報」というエンティティを作成しています。）
フォームの作成画面からタイムラインを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/1a66caac-86dc-2eb7-613b-47504104ff06.png)


#②ポータルにフォームを設置
ポータルの編集画面から先ほど作成したフォームを任意の場所に設置します。

先ほど作成しておいたエンティティのフォームレイアウトを選択し、モードを「挿入」にします。
画像では「既存のものを使用」していますが、「新規作成」してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/9b990426-6618-a580-61c2-440c5ee07f2f.png)


#③ポータル管理アプリを開く
ポータルを作成した環境には自動的に「ポータル管理」というモデル駆動型アプリが作成されます。
このアプリからポータルの細かい設定ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/ff76de8a-f61d-7b73-6902-9b8483c50c94.png)


#④エンティティフォームの設定
左のメニューから「エンティティフォーム」を選択し、②でポータルに設置したエンティティフォームを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8add9db0-e20f-d018-8937-fa85e819fdfc.png)

「追加設定」タブを開き、下にスクロールしていくと、「添付ファイルの追加」という項目があります。
「ファイルの添付」にチェックをつけ、「添付ファイルの保存オプション」をメモ、「添付ファイルの保存場所」をメモ添付ファイルに設定します。
一度上書き保存をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/65612105-bf56-06fa-966f-d7f2743e36b1.png)

上書き保存が完了したら、「エンティティ　フォームメタデータ」のタブを開きます。
画像の印をつけた場所をクリックして、新しいエンティティフォームメタデータの追加をします。
（画像では既にデータが入っていますが、この時点ではまだ空のはずです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/4dd401c7-09e9-4756-d1c3-5ac8d4d77836.png)

画像のように設定し、保存してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/efadf406-f839-c732-082f-157b195c9836.png)


#⑤エンティティのアクセス許可の設定
①でフォームを作成したエンティティ（今回は商品情報）とメモ、**２つのエンティティに対してアクセス許可の設定をする必要があります。**

左のメニューから「エンティティのアクセス許可」を選択し新規作成を押します。
（画像では既にデータが入っていますが、実際はこの時点では入っていません。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/99b98e39-4b50-2fbf-0ca8-11b424e35baa.png)

まずは①でフォームを作成したエンティティのアクセス許可を作成します。
名前は任意のわかりやすい名前を付けてください。
エンティティ名、Webサイトを対象のもの、スコープをグローバルに設定してください。
特権は必要なものにチェックを入れてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/ada7d9d3-a533-68aa-cd2b-c6e7f8e46377.png)

下にスクロールして、「Webロール」の設定をします。
「既存のWebロールの追加」をクリックして、適切なロールを追加してください。
（画像では既に追加されています。今回はサインイン後にのみ見られるページにフォームを設置したので、管理者と認証されたユーザーにのみアクセス許可を与えています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/13ed0c0b-9cf6-d380-5ba2-ed4ab1ffba04.png)

画像の印をつけたところでエンターを押すと、Webロールの一覧が出てきます。
必要なものをクリックして追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/4d119fa0-1a02-3dde-d1e2-4d8e74187e79.png)

Webロールの追加ができたら、保存をして閉じて、同様の手順で「メモ」エンティティのアクセス許可も設定してください。

下の画像で印をつけたところで「メモ」を選んでください。
それ以外は先ほどと同様の手順で設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/f9efaad1-47e7-3133-7138-c72f6632fc81.png)

以上で設定は完了です。


##動作確認

ポータルのフォームを設置したページにアクセスをします。
ファイルの添付ができるようになっていることが確認できます。
テストデータを入力し、適当なファイルを添付して送信を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/70867c16-ef01-35a5-2387-7e7aa18eda25.png)

モデル駆動型アプリから入力したデータを確認します。
ポータルでアップロードしたファイルを確認することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/fbebd01e-2c5d-1abe-9657-587a88a5683d.png)