Power AppsからSharePoint Online(以降SPO)のドキュメントライブラリにファイルをアップロードする方法をメモ。
事前準備
まずはSPOにファイルをアップロードするドキュメントライブラリを作り、


SPOリストを1つ作成する。
※添付コントロールを使うために必要。

※添付コントロールを使うために必要。

これで準備は完了。
Power Automateの作成
まずはPower Appsから呼び出してファイルをアップロードするPower Automateを作成する。
Power Apps(V2)トリガーのフローを作成し、


ファイル型の引数を追加する。




そしたらSharePointのアクション「ファイルの作成」を追加して、準備で作成したドキュメントライブラリとそのサイトを選択し、[ファイル名]に「triggerBody()[‘引数名’][‘name’]」を、


[ファイルコンテンツ]に引数自体(厳密にはcontentsByte)を入れる。


これでPower Automateの構築は完了。


Power Appsの作成
続いてPower Appsの作成。
キャンバスアプリを新規作成して、事前準備で作成したリストを追加、


画面に[編集フォーム]を追加し、


データソースにSPOリストを設定すると添付ファイルのDataCardができるので、その中のDataCardValueを切り取る。


切り取ったDataCardValueを任意の画面に貼り付けてエラーを消したら準備完了。
※エラーが出てるXとかYとかのプロパティは任意の値を設定し、Itemsプロパティは「空」に設定してOK

※エラーが出てるXとかYとかのプロパティは任意の値を設定し、Itemsプロパティは「空」に設定してOK

これでUIも完成!
Power AppsからPower Automateを呼び出す
[フローの追加]から先ほど作成したPower Automateのフローを追加し、


MaxAttachments(最大添付数)を1に設定して、アップロード可能なファイルを1個に制限する。
※複数アップロードしたい場合については後述。

※複数アップロードしたい場合については後述。

最後にアップロードボタンを追加し、OnSelectに以下の数式を記入したら完成。

フロー名.Run({ フローの引数名: { contentBytes:First(添付コントロール名.Attachments).Value, name:First(添付コントロール名.Attachments).Name } });
動作確認
アプリを再生して、任意のファイルを添付してボタンを押すと、


Power Automateが動作して、


ファイルがドキュメントライブラリに保存される。


複数ファイルをアップロードしたい場合
複数アップロードしたい場合はMaxAttachmentsをアップロードを許可する数値に変更して、


ボタンの式を以下のように変更すれば完成。

ForAll( 添付コントロール名.Attachments As attachment, フロー名.Run({ フローの引数名: { contentBytes:attachment.Value, name:attachment.Name } }) );
複数ファイルを添付してアップロードボタンを押すと、


ファイルが複数アップロードされる。
※同じ名前のファイルがある場合は上書きされる。

※同じ名前のファイルがある場合は上書きされる。

画像コントロールを使用してdataUriを取得してアップロードする方法もあるけど、個人的にはこちらの方法の方が簡潔に実装できるので好み。
コメント