PowerAppsから画像をSharePointにアップロードする

PowerAppsを使って撮影した画像をSharePointにアップロードしたいと思います。

この記事ではPowerApps -> PowerAutomate -> SharePoint
というフローで画像のアップロードを行います。

PowerApps側

Screen上にAdd Pictureコンポーネント(UploadedImage1)を追加します。

こんな感じでScreenに置きます。

ボタンを設置し、OnSelectに下記の数式を加えます。

UpdateContext(
            {
                docJson: Substitute(
                    JSON(
                        UploadedImage1.Image,
                        IncludeBinaryData
                    ),
                    """",
                    ""
                )
            }
        );
UpdateContext({flowResponse: SaveImageToSharePoint.Run(docJson)});
UpdateContext({imagePath: flowResponse.path});

UpdateContextでコンテキスト変数、docJsonに画像のバイナリデータを保持します。
これをPowerAutomateのフローであるSaveImageToSharePointを
SaveImageToSharePoint.Run で呼び出し、docJsonを渡します。

コンテキスト変数flowResponseにその戻り値が帰ってくるようにしています。
また、flowResponse.pathでSharePointで保存された画像のパスにアクセスできるようにしています。

次に、PowerAutomateのフロー、SaveImageToSharePointをみてみます。

PowerAutomate側

ステップはこのようになります。

JSONの解析 ステップでは

{
    "type": "object",
    "properties": {
        "JSONの解析_コンテンツ": {
            "type": "string"
        }
    }
}

PowerAppsから渡されたJSONのスキーマはこのようになります。

次に、SharePointのファイル生成で肝になるのがFile Contentです。

File Contentに書く内容は
1. 上のJSONの解析ステップのJSONの解析_コンテンツプロパティを
2. dataUriToBinaryでData URIのフォーマットをバイナリに変換する
です。
dataUriToBinary(body('JSON_の解析')?['JSONの解析_コンテンツ'])

最後のPowerAppsまたはFlowに応答するステップでは

PowerApps側への戻り値を作ります。この場合、ファイル名とファイルのパスとなります。

以上が一連の流れです。

余談ですが、PowerApps側でこのファイルパスの戻り値をPowerAppsの画像コンポーネントのImageに下記のように設定すると、

Concatenate(
    "https://your_org_sub_domain.sharepoint.com/sites/your_directory/",
    path
)

SharePointにアップロードした画像を表示することができます。

しかし、モバイルアプリ版のPowerAppsからはCookie認証の関係でSharePointにある画像は表示することができません。