MoreBeerMorePower

Power Platform中心だけど、ノーコード/ローコード系を書いてます。

Power Appsの添付ファイルコントロールに追加したファイルを一括でbase64化

少し前にPower AppsでExcelファイルをアップロードしてDataverseにデータ登録を行うようなアプリとフローを紹介しました。

mofumofupower.hatenablog.com

今回は少し応用して、複数ファイルを一括でフローに渡すようなケースを考えます。

説明の都合上、ファイル→Base64文字列への変換ボタンと、フローの実行は分けています。

f:id:mofumofu_dance:20210106163013p:plain
アプリの構成

画面には添付ファイルコントロールとギャラリーコントロールを2つ、そしてデータ変換用ボタンを追加しています。

真ん中のギャラリーは変換の都合で追加しているだけなので、非表示でも問題ありませんし、右側のギャラリーは結果確認用なのでなくてもよいです。

ポイントは3つ

  1. ギャラリーコントロールのItems プロパティ = 添付ファイルコントロールのAttachments
  2. ギャラリーコントロールには画像コントロールを入れる
  3. Base64への変換はJSON関数とAddColumnsを利用

です。

1. ギャラリーのItems プロパティ

変換用ギャラリーコントロールの Itemsプロパティには、添付ファイルコントロール (ここではDataCardValue5) のAttachmentsを設定します。

f:id:mofumofu_dance:20210106163842p:plain
変換用ギャラリーコントロールのItems

Attachmentsプロパティにはファイルのblobパス (Value)とファイル名 (Name)が含まれています。今回重要になるのはValueの方です。

単一ファイルの時と同様に、これを画像コントロールに設定し、JSON関数を利用することで添付ファイルのBase64文字列が得られます。

f:id:mofumofu_dance:20210106164155p:plain
Attachmentsの中身

2. ギャラリーに画像コントロールを追加

添付ファイルコントロールのファイル、あるいはPower AppsでファイルのBase64文字列を得る場合のポイントは、画像コントロールを利用することでした。

複数ファイルの場合にも画像コントロールを中継することでBase64文字列を得ます。このために、変換用ギャラリーには画像コントロールを追加しておきます。

画像コントロールのImageプロパティには ThisItem.Value をセットしましょう。

f:id:mofumofu_dance:20210106164647p:plain
ギャラリー内の画像コントロールに添付ファイルのValueを指定

準備はこれで完了です。あとはファイル名とファイルのBase64文字列 (data Uri) を含むコレクションを作っていきます。

3. Base64への変換はJSON関数とAddColumns

JSON(画像, IncludeBinaryData) この組み合わせでBase64文字列が得られるのはこのブログでもすでに紹介した通りです。

複数ファイルの場合には、変換用ギャラリーの画像コントロールを対象とすることで同じようにBase64文字列が得られます。

ボタンを追加して以下の数式を追加します。

ClearCollect(
    base64Collection,
    ShowColumns(
        AddColumns(
            Gallery1.AllItems,
            "data",
            Substitute(
                JSON(
                    Image2.Image,
                    IncludeBinaryData
                ),
                """",
                ""
            )
        ),
        "Name",
        "data"
    )
)

Gallery1.AllItems にはギャラリー内のコントロールなども含まれるので、これで画像コントロールを Imageプロパティにアクセスできるようになります。

あとはJSON関数で生成するBase64文字列をAddColumns関数で追加し、コレクションに格納しています。

f:id:mofumofu_dance:20210106165022p:plain
変換ボタンの数式。JSONとAddColumnsを利用

結果、生成されたコレクションには、ファイル名とBase64文字列が含まれます。

f:id:mofumofu_dance:20210106165457p:plain

注意事項

ここでは数文字のテキストファイルやhtmlファイルでテストしているので文字列をフルで表示していますが、通常は数万文字程度にまでなるので、うっかり検証用のギャラリーを追加しているとブラウザ-が固まります。

動作の妥当性は軽いテキストで行って、利用するときには消すか非表示にしましょう。

おわり

最後はJSON関数をもう一度使ってファイル名とBase64文字列を含む配列 (の文字列) を得ます。

f:id:mofumofu_dance:20210106165839p:plain
最後にフローに渡す配列(の文字列)を生成する

あとは下のブログで紹介しているようにフロー側でJSONを解析して、Apply to eachでファイル登録を行ったり、画像解析のソースにしたり、ExcelならテーブルのデータをDBに追加したりと応用は様々です。

qiita.com

Power Appsからのファイルアップロードでお困りの際には参考にしていただければ幸いです。