ありそうでなかった！Power Appsから直接SharePointのドキュメントライブラリにアップロードするコンポーネントを作成する

:::note warn
2024.08.06 22:55時点でPower AppsのYAML ソースコードのビューが使用できない状態です。
GitHubからコンポーネントを複製することはできない状態ですので、ご了承のほど、よろしくお願いいたします。
:::

# はじめに

*SharePointのドキュメント ライブラリへPower Appsから直接ファイルをアップロードしたい*
こう思ったことはありませんか。私は度々ありました。

`Power Apps`からファイルをアップロードする場合、
 - `フォーム コントロール`から[SubmitForm 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-form#submitform)で`SharePoint Lists`の添付ファイル列にアップロードする
 - [Collect 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-clear-collect-clearcollect)を使っての添付ファイル列にアップロードする
 - `Power Automate`を利用する

主にこの3つの方法が挙げられます。

[SubmitForm 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-form#submitform)や[Collect 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-clear-collect-clearcollect)の場合、`SharePoint Lists`のみ。
`Power Automate`を毎回構築するのも非常に手間です。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-form#submitform

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-clear-collect-clearcollect

そのような中で`Power Apps`界隈のロックスター[Reza Dorrani](https://www.youtube.com/watch?v=n3mhe88BI34&t=872s)氏の下記の動画を拝見しました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/n3mhe88BI34?si=gXmLqE69PIR-rfTq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

[Office 365 Groups コネクタ](https://learn.microsoft.com/ja-jp/connectors/office365groups/)を用いた**Graph API**によるファイルアップロードのアプローチです。
本当に素晴らしすぎて感動します✨

https://learn.microsoft.com/ja-jp/connectors/office365groups/

[コネクタ](https://learn.microsoft.com/ja-jp/connectors/office365groups/)のうち[HTTP リクエストを送信 「非推奨」](https://learn.microsoft.com/ja-jp/connectors/office365groups/#http-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%BE%E3%81%99-%E3%80%8C%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%80%8D)を使って、APIの利用を実現します。

:::note warn
残念ながら、`2024.08.03`時点で、[非推奨]のアクションです。
廃止される可能性が存在する方法とご認識ください。
:::

# [Office 365 Groups コネクタ](https://learn.microsoft.com/ja-jp/connectors/office365groups/)による[HTTP リクエストを送信](https://learn.microsoft.com/ja-jp/connectors/office365groups/#http-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%BE%E3%81%99-%E3%80%8C%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%80%8D)

[Office 365 Groups コネクタ](https://learn.microsoft.com/ja-jp/connectors/office365groups/)による[
HTTP リクエストを送信 「非推奨」](https://learn.microsoft.com/ja-jp/connectors/office365groups/#http-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%BE%E3%81%99-%E3%80%8C%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%80%8D)は、幅広いセグメントに対するアプローチを実施することができます。

`SharePoint`へのファイルアップロードも同様であり、アップロードに加えて、ファイルやフォルダの存在の有無も`Power Apps`から実現できてしまいます。

まずは[Reza Dorrani](https://www.youtube.com/watch?v=n3mhe88BI34&t=872s)氏の動画をもとに見ていきましょう。

`SharePoint`の`ドキュメント ライブラリ`にファイルをアップロードする場合は、あらかじめ`site-id`と`drive-id`が必要になります。

https://learn.microsoft.com/ja-jp/graph/api/driveitem-put-content?view=graph-rest-1.0&tabs=http#to-upload-a-new-file

それぞれの`id`の取得方法について、動画で解説が既にされており、こちらも`Graph API`を用いることで取得することができます。
[Graph Explorer](https://developer.microsoft.com/en-us/graph/graph-explorer)で下記を試すことが手っ取り早いです。

https://developer.microsoft.com/en-us/graph/graph-explorer

[Graph Explorer](https://developer.microsoft.com/en-us/graph/graph-explorer)を開き
```plaintext:エンドポイント
https://graph.microsoft.com/v1.0/sites/{自分のRootのSharePointサイト}:/sites/{サイト名}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/10f53e84-0225-38ac-636b-983aba1fd96e.png)

下記に対して、[ *Run query* ]を実行すると、赤枠に`site_id`が表示されます。
取得した`site_id`をもとに、対象のSharePoint Siteのドキュメント ライブラリを列挙するために、下記のQueryを実行します。

```plaintext:エンドポイント
https://graph.microsoft.com/v1.0/sites/{site_id}/drives
```

こちらでサイト内に存在するドキュメントライブラリの`drive_id`を取得できます。
キャプチャの場合、ドキュメントの`drive_id`は赤枠の`b!dwCAcNIG5ki0BV6fOMT1Rr9SpIdKR-FLpWFirBodrDt37yRHQymCRI9sniRyxB1d`が該当します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ccfd87b0-2e20-d2cf-7dcf-8c117291b5e8.png)

# コンポーネントを作成する
さて、このファイルのアップロード機能は、**活躍する範囲が広い見込みなので、コンポーネントとして作成します。**
コンポーネントとして作成することにより、複数のアプリケーションで、作成した機能を再利用することができます。

作成したものが[コチラ](https://x.com/DemodoriGatsuo/status/1819363031681552792)。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">尊敬するReza Dorrani(<a href="https://twitter.com/rezadorrani?ref_src=twsrc%5Etfw">@rezadorrani</a>)氏の動画を参考に、Office 365 Groupsコネクタでファイルアップロードのコンポーネント作成。このアクション生存し続けてほしい・・・。<br><br>A heartfelt thank you to Reza Dorrani for his invaluable contributions to the Power Platform community. Your… <a href="https://t.co/0L3O2YbL3A">pic.twitter.com/0L3O2YbL3A</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1819363031681552792?ref_src=twsrc%5Etfw">August 2, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ベータ版ですが、試用されたい場合は、`GitHub`に[YAMLソースコードをアップしております](https://github.com/DEmodoriGatsuO/powerapps_component/blob/main/components/file_upload.yaml)ので、そちらをご覧ください。

https://github.com/DEmodoriGatsuO/powerapps_component/blob/main/components/file_upload.yaml

:::note info
内容はアップデートする可能性があります。
あらかじめご了承ください。

またリポジトリのREADMEの作成は未着手です。
:::

コンポーネントの機能は
 - **ユーザーが指定したフォルダに、ドラッグアンドドロップでファイルをアップロード**
 - **Fluent UIを使ったSharePointで表示されるファイルアイコンの表示**
 - **指定のフォルダの子ファイルの一覧表示**

上記の機能を含めてみます。

## 準備
コンポーネントの詳細な作成手順は、この記事では触れません。
コンポーネントライブラリにて、任意の名称でライブラリを作成している状態から進めます。

`コンポーネント`の作成画面で`新しいコンポーネント`をクリックし、[データ] > [+ データの追加]から[Office 365 Groups コネクタ](https://learn.microsoft.com/ja-jp/connectors/office365groups/)を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3da590e6-18c2-52bd-f67a-5bcb634874e2.png)

## コンポーネントの入力プロパティ
コンポーネントの入力プロパティに下記の値を設定します。

 - **site_id** - *Graph API*で取得した`SharePointサイト id`
 - **drive_id** - *Graph API*で取得した`SharePointのドキュメント ライブラリ id`
 - **folder_name** - フォルダの名前
 - **static_icon_table**

`site-id`と`drive-id`は文字通り、`SharePoint`の値、`folder_name`にはアップロードするフォルダの名前を設定します。

このうち`static_icon_table`は[Fluent UIを使ったSharePointで表示されるファイルアイコンの表示](https://qiita.com/DEmodoriGatsuO/items/f374cc210b7d76553815#%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%82%E3%81%AE%E3%82%92%E4%B8%80%E8%A6%A7%E5%8C%96%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)に用いる参照用のテーブルです。

https://qiita.com/DEmodoriGatsuO/items/f374cc210b7d76553815#%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%82%E3%81%AE%E3%82%92%E4%B8%80%E8%A6%A7%E5%8C%96%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B

静的な値だと思ってください。

非常に長いため、折りたたみで関数を載せます。

<details><summary>static_icon_table</summary>

```yaml:static_icon_table
Table(
    {
        FileType: "accdb",
        Extention: "accdb"
    },
    {
        FileType: "accdb",
        Extention: "mdb"
    },
    {
        FileType: "archive",
        Extention: "7z"
    },
    {
        FileType: "archive",
        Extention: "ace"
    },
    {
        FileType: "archive",
        Extention: "arc"
    },
    {
        FileType: "archive",
        Extention: "arj"
    },
    {
        FileType: "archive",
        Extention: "dmg"
    },
    {
        FileType: "archive",
        Extention: "gz"
    },
    {
        FileType: "archive",
        Extention: "iso"
    },
    {
        FileType: "archive",
        Extention: "lzh"
    },
    {
        FileType: "archive",
        Extention: "pkg"
    },
    {
        FileType: "archive",
        Extention: "rar"
    },
    {
        FileType: "archive",
        Extention: "sit"
    },
    {
        FileType: "archive",
        Extention: "tgz"
    },
    {
        FileType: "archive",
        Extention: "tar"
    },
    {
        FileType: "archive",
        Extention: "z"
    },
    {
        FileType: "audio",
        Extention: "aif"
    },
    {
        FileType: "audio",
        Extention: "aiff"
    },
    {
        FileType: "audio",
        Extention: "aac"
    },
    {
        FileType: "audio",
        Extention: "alac"
    },
    {
        FileType: "audio",
        Extention: "amr"
    },
    {
        FileType: "audio",
        Extention: "ape"
    },
    {
        FileType: "audio",
        Extention: "au"
    },
    {
        FileType: "audio",
        Extention: "awb"
    },
    {
        FileType: "audio",
        Extention: "dct"
    },
    {
        FileType: "audio",
        Extention: "dss"
    },
    {
        FileType: "audio",
        Extention: "dvf"
    },
    {
        FileType: "audio",
        Extention: "flac"
    },
    {
        FileType: "audio",
        Extention: "gsm"
    },
    {
        FileType: "audio",
        Extention: "m4a"
    },
    {
        FileType: "audio",
        Extention: "m4p"
    },
    {
        FileType: "audio",
        Extention: "mid"
    },
    {
        FileType: "audio",
        Extention: "mmf"
    },
    {
        FileType: "audio",
        Extention: "mp3"
    },
    {
        FileType: "audio",
        Extention: "oga"
    },
    {
        FileType: "audio",
        Extention: "ra"
    },
    {
        FileType: "audio",
        Extention: "rm"
    },
    {
        FileType: "audio",
        Extention: "wav"
    },
    {
        FileType: "audio",
        Extention: "wma"
    },
    {
        FileType: "audio",
        Extention: "wv"
    },
    {
        FileType: "calendar",
        Extention: "ical"
    },
    {
        FileType: "calendar",
        Extention: "icalendar"
    },
    {
        FileType: "calendar",
        Extention: "ics"
    },
    {
        FileType: "calendar",
        Extention: "ifb"
    },
    {
        FileType: "calendar",
        Extention: "vcs"
    },
    {
        FileType: "classifier",
        Extention: "classifier"
    },
    {
        FileType: "clipchamp",
        Extention: "clipchamp"
    },
    {
        FileType: "code",
        Extention: "abap"
    },
    {
        FileType: "code",
        Extention: "ada"
    },
    {
        FileType: "code",
        Extention: "adp"
    },
    {
        FileType: "code",
        Extention: "ahk"
    },
    {
        FileType: "code",
        Extention: "as"
    },
    {
        FileType: "code",
        Extention: "as3"
    },
    {
        FileType: "code",
        Extention: "asc"
    },
    {
        FileType: "code",
        Extention: "ascx"
    },
    {
        FileType: "code",
        Extention: "asm"
    },
    {
        FileType: "code",
        Extention: "asp"
    },
    {
        FileType: "code",
        Extention: "awk"
    },
    {
        FileType: "code",
        Extention: "bash"
    },
    {
        FileType: "code",
        Extention: "bash_login"
    },
    {
        FileType: "code",
        Extention: "bash_logout"
    },
    {
        FileType: "code",
        Extention: "bash_profile"
    },
    {
        FileType: "code",
        Extention: "bashrc"
    },
    {
        FileType: "code",
        Extention: "bat"
    },
    {
        FileType: "code",
        Extention: "bib"
    },
    {
        FileType: "code",
        Extention: "bsh"
    },
    {
        FileType: "code",
        Extention: "build"
    },
    {
        FileType: "code",
        Extention: "builder"
    },
    {
        FileType: "code",
        Extention: "c"
    },
    {
        FileType: "code",
        Extention: "cbl"
    },
    {
        FileType: "code",
        Extention: "c++"
    },
    {
        FileType: "code",
        Extention: "capfile"
    },
    {
        FileType: "code",
        Extention: "cc"
    },
    {
        FileType: "code",
        Extention: "cfc"
    },
    {
        FileType: "code",
        Extention: "cfm"
    },
    {
        FileType: "code",
        Extention: "cfml"
    },
    {
        FileType: "code",
        Extention: "cl"
    },
    {
        FileType: "code",
        Extention: "clj"
    },
    {
        FileType: "code",
        Extention: "cls"
    },
    {
        FileType: "code",
        Extention: "cmake"
    },
    {
        FileType: "code",
        Extention: "cmd"
    },
    {
        FileType: "code",
        Extention: "coffee"
    },
    {
        FileType: "code",
        Extention: "config"
    },
    {
        FileType: "code",
        Extention: "cpp"
    },
    {
        FileType: "code",
        Extention: "cpt"
    },
    {
        FileType: "code",
        Extention: "cpy"
    },
    {
        FileType: "code",
        Extention: "cs"
    },
    {
        FileType: "code",
        Extention: "cshtml"
    },
    {
        FileType: "code",
        Extention: "cson"
    },
    {
        FileType: "code",
        Extention: "csproj"
    },
    {
        FileType: "code",
        Extention: "css"
    },
    {
        FileType: "code",
        Extention: "ctp"
    },
    {
        FileType: "code",
        Extention: "cxx"
    },
    {
        FileType: "code",
        Extention: "d"
    },
    {
        FileType: "code",
        Extention: "ddl"
    },
    {
        FileType: "code",
        Extention: "di"
    },
    {
        FileType: "code",
        Extention: "disco"
    },
    {
        FileType: "code",
        Extention: "dml"
    },
    {
        FileType: "code",
        Extention: "dtd"
    },
    {
        FileType: "code",
        Extention: "dtml"
    },
    {
        FileType: "code",
        Extention: "el"
    },
    {
        FileType: "code",
        Extention: "emakefile"
    },
    {
        FileType: "code",
        Extention: "erb"
    },
    {
        FileType: "code",
        Extention: "erl"
    },
    {
        FileType: "code",
        Extention: "f"
    },
    {
        FileType: "code",
        Extention: "f90"
    },
    {
        FileType: "code",
        Extention: "f95"
    },
    {
        FileType: "code",
        Extention: "fs"
    },
    {
        FileType: "code",
        Extention: "fsi"
    },
    {
        FileType: "code",
        Extention: "fsscript"
    },
    {
        FileType: "code",
        Extention: "fsx"
    },
    {
        FileType: "code",
        Extention: "gemfile"
    },
    {
        FileType: "code",
        Extention: "gemspec"
    },
    {
        FileType: "code",
        Extention: "gitconfig"
    },
    {
        FileType: "code",
        Extention: "go"
    },
    {
        FileType: "code",
        Extention: "groovy"
    },
    {
        FileType: "code",
        Extention: "gvy"
    },
    {
        FileType: "code",
        Extention: "h"
    },
    {
        FileType: "code",
        Extention: "h++"
    },
    {
        FileType: "code",
        Extention: "haml"
    },
    {
        FileType: "code",
        Extention: "handlebars"
    },
    {
        FileType: "code",
        Extention: "hbs"
    },
    {
        FileType: "code",
        Extention: "hcp"
    },
    {
        FileType: "code",
        Extention: "hh"
    },
    {
        FileType: "code",
        Extention: "hpp"
    },
    {
        FileType: "code",
        Extention: "hrl"
    },
    {
        FileType: "code",
        Extention: "hs"
    },
    {
        FileType: "code",
        Extention: "htc"
    },
    {
        FileType: "code",
        Extention: "hxx"
    },
    {
        FileType: "code",
        Extention: "idl"
    },
    {
        FileType: "code",
        Extention: "iim"
    },
    {
        FileType: "code",
        Extention: "inc"
    },
    {
        FileType: "code",
        Extention: "inf"
    },
    {
        FileType: "code",
        Extention: "ini"
    },
    {
        FileType: "code",
        Extention: "inl"
    },
    {
        FileType: "code",
        Extention: "ipp"
    },
    {
        FileType: "code",
        Extention: "irbrc"
    },
    {
        FileType: "code",
        Extention: "jade"
    },
    {
        FileType: "code",
        Extention: "jav"
    },
    {
        FileType: "code",
        Extention: "java"
    },
    {
        FileType: "code",
        Extention: "js"
    },
    {
        FileType: "code",
        Extention: "json"
    },
    {
        FileType: "code",
        Extention: "jsp"
    },
    {
        FileType: "code",
        Extention: "jsproj"
    },
    {
        FileType: "code",
        Extention: "jsx"
    },
    {
        FileType: "code",
        Extention: "l"
    },
    {
        FileType: "code",
        Extention: "less"
    },
    {
        FileType: "code",
        Extention: "lhs"
    },
    {
        FileType: "code",
        Extention: "lisp"
    },
    {
        FileType: "code",
        Extention: "log"
    },
    {
        FileType: "code",
        Extention: "lst"
    },
    {
        FileType: "code",
        Extention: "ltx"
    },
    {
        FileType: "code",
        Extention: "lua"
    },
    {
        FileType: "code",
        Extention: "m"
    },
    {
        FileType: "code",
        Extention: "mak"
    },
    {
        FileType: "code",
        Extention: "make"
    },
    {
        FileType: "code",
        Extention: "manifest"
    },
    {
        FileType: "code",
        Extention: "master"
    },
    {
        FileType: "code",
        Extention: "md"
    },
    {
        FileType: "code",
        Extention: "markdn"
    },
    {
        FileType: "code",
        Extention: "markdown"
    },
    {
        FileType: "code",
        Extention: "mdown"
    },
    {
        FileType: "code",
        Extention: "mkdn"
    },
    {
        FileType: "code",
        Extention: "ml"
    },
    {
        FileType: "code",
        Extention: "mli"
    },
    {
        FileType: "code",
        Extention: "mll"
    },
    {
        FileType: "code",
        Extention: "mly"
    },
    {
        FileType: "code",
        Extention: "mm"
    },
    {
        FileType: "code",
        Extention: "mud"
    },
    {
        FileType: "code",
        Extention: "nfo"
    },
    {
        FileType: "code",
        Extention: "opml"
    },
    {
        FileType: "code",
        Extention: "osascript"
    },
    {
        FileType: "code",
        Extention: "p"
    },
    {
        FileType: "code",
        Extention: "pas"
    },
    {
        FileType: "code",
        Extention: "patch"
    },
    {
        FileType: "code",
        Extention: "php"
    },
    {
        FileType: "code",
        Extention: "php2"
    },
    {
        FileType: "code",
        Extention: "php3"
    },
    {
        FileType: "code",
        Extention: "php4"
    },
    {
        FileType: "code",
        Extention: "php5"
    },
    {
        FileType: "code",
        Extention: "phtml"
    },
    {
        FileType: "code",
        Extention: "pl"
    },
    {
        FileType: "code",
        Extention: "pm"
    },
    {
        FileType: "code",
        Extention: "pod"
    },
    {
        FileType: "code",
        Extention: "pp"
    },
    {
        FileType: "code",
        Extention: "profile"
    },
    {
        FileType: "code",
        Extention: "ps1"
    },
    {
        FileType: "code",
        Extention: "ps1xml"
    },
    {
        FileType: "code",
        Extention: "psd1"
    },
    {
        FileType: "code",
        Extention: "psm1"
    },
    {
        FileType: "code",
        Extention: "pss"
    },
    {
        FileType: "code",
        Extention: "pt"
    },
    {
        FileType: "code",
        Extention: "py"
    },
    {
        FileType: "code",
        Extention: "pyw"
    },
    {
        FileType: "code",
        Extention: "r"
    },
    {
        FileType: "code",
        Extention: "rake"
    },
    {
        FileType: "code",
        Extention: "rb"
    },
    {
        FileType: "code",
        Extention: "rbx"
    },
    {
        FileType: "code",
        Extention: "rc"
    },
    {
        FileType: "code",
        Extention: "rdf"
    },
    {
        FileType: "code",
        Extention: "re"
    },
    {
        FileType: "code",
        Extention: "reg"
    },
    {
        FileType: "code",
        Extention: "rest"
    },
    {
        FileType: "code",
        Extention: "resw"
    },
    {
        FileType: "code",
        Extention: "resx"
    },
    {
        FileType: "code",
        Extention: "rhtml"
    },
    {
        FileType: "code",
        Extention: "rjs"
    },
    {
        FileType: "code",
        Extention: "rprofile"
    },
    {
        FileType: "code",
        Extention: "rpy"
    },
    {
        FileType: "code",
        Extention: "rss"
    },
    {
        FileType: "code",
        Extention: "rst"
    },
    {
        FileType: "code",
        Extention: "ruby"
    },
    {
        FileType: "code",
        Extention: "rxml"
    },
    {
        FileType: "code",
        Extention: "s"
    },
    {
        FileType: "code",
        Extention: "sass"
    },
    {
        FileType: "code",
        Extention: "scala"
    },
    {
        FileType: "code",
        Extention: "scm"
    },
    {
        FileType: "code",
        Extention: "sconscript"
    },
    {
        FileType: "code",
        Extention: "sconstruct"
    },
    {
        FileType: "code",
        Extention: "script"
    },
    {
        FileType: "code",
        Extention: "scss"
    },
    {
        FileType: "code",
        Extention: "sgml"
    },
    {
        FileType: "code",
        Extention: "sh"
    },
    {
        FileType: "code",
        Extention: "shtml"
    },
    {
        FileType: "code",
        Extention: "sml"
    },
    {
        FileType: "code",
        Extention: "svn-base"
    },
    {
        FileType: "code",
        Extention: "swift"
    },
    {
        FileType: "code",
        Extention: "sql"
    },
    {
        FileType: "code",
        Extention: "sty"
    },
    {
        FileType: "code",
        Extention: "tcl"
    },
    {
        FileType: "code",
        Extention: "tex"
    },
    {
        FileType: "code",
        Extention: "textile"
    },
    {
        FileType: "code",
        Extention: "tld"
    },
    {
        FileType: "code",
        Extention: "tli"
    },
    {
        FileType: "code",
        Extention: "tmpl"
    },
    {
        FileType: "code",
        Extention: "tpl"
    },
    {
        FileType: "code",
        Extention: "vb"
    },
    {
        FileType: "code",
        Extention: "vi"
    },
    {
        FileType: "code",
        Extention: "vim"
    },
    {
        FileType: "code",
        Extention: "vmg"
    },
    {
        FileType: "code",
        Extention: "webpart"
    },
    {
        FileType: "code",
        Extention: "wsp"
    },
    {
        FileType: "code",
        Extention: "wsdl"
    },
    {
        FileType: "code",
        Extention: "xhtml"
    },
    {
        FileType: "code",
        Extention: "xoml"
    },
    {
        FileType: "code",
        Extention: "xsd"
    },
    {
        FileType: "code",
        Extention: "xslt"
    },
    {
        FileType: "code",
        Extention: "yaml"
    },
    {
        FileType: "code",
        Extention: "yaws"
    },
    {
        FileType: "code",
        Extention: "yml"
    },
    {
        FileType: "code",
        Extention: "zsh"
    },
    {
        FileType: "contact",
        Extention: "vcf"
    },
    {
        FileType: "csv",
        Extention: "csv"
    },
    {
        FileType: "designer",
        Extention: "design"
    },
    {
        FileType: "desktopfolder",
        Extention: "{}"
    },
    {
        FileType: "docset",
        Extention: "{}"
    },
    {
        FileType: "documentsfolder",
        Extention: "{}"
    },
    {
        FileType: "docx",
        Extention: "doc"
    },
    {
        FileType: "docx",
        Extention: "docm"
    },
    {
        FileType: "docx",
        Extention: "docx"
    },
    {
        FileType: "docx",
        Extention: "docb"
    },
    {
        FileType: "dotx",
        Extention: "dot"
    },
    {
        FileType: "dotx",
        Extention: "dotm"
    },
    {
        FileType: "dotx",
        Extention: "dotx"
    },
    {
        FileType: "email",
        Extention: "eml"
    },
    {
        FileType: "email",
        Extention: "msg"
    },
    {
        FileType: "email",
        Extention: "oft"
    },
    {
        FileType: "email",
        Extention: "ost"
    },
    {
        FileType: "email",
        Extention: "pst"
    },
    {
        FileType: "exe",
        Extention: "application"
    },
    {
        FileType: "exe",
        Extention: "appref-ms"
    },
    {
        FileType: "exe",
        Extention: "apk"
    },
    {
        FileType: "exe",
        Extention: "app"
    },
    {
        FileType: "exe",
        Extention: "appx"
    },
    {
        FileType: "exe",
        Extention: "exe"
    },
    {
        FileType: "exe",
        Extention: "ipa"
    },
    {
        FileType: "exe",
        Extention: "msi"
    },
    {
        FileType: "exe",
        Extention: "xap"
    },
    {
        FileType: "favoritesfolder",
        Extention: "{}"
    },
    {
        FileType: "folder",
        Extention: "{}"
    },
    {
        FileType: "font",
        Extention: "ttf"
    },
    {
        FileType: "font",
        Extention: "otf"
    },
    {
        FileType: "font",
        Extention: "woff"
    },
    {
        FileType: "form",
        Extention: "{}"
    },
    {
        FileType: "genericfile",
        Extention: "{}"
    },
    {
        FileType: "html",
        Extention: "htm"
    },
    {
        FileType: "html",
        Extention: "html"
    },
    {
        FileType: "html",
        Extention: "mht"
    },
    {
        FileType: "html",
        Extention: "mhtml"
    },
    {
        FileType: "ipynb",
        Extention: "nnb"
    },
    {
        FileType: "ipynb",
        Extention: "ipynb"
    },
    {
        FileType: "link",
        Extention: "lnk"
    },
    {
        FileType: "link",
        Extention: "link"
    },
    {
        FileType: "link",
        Extention: "url"
    },
    {
        FileType: "link",
        Extention: "website"
    },
    {
        FileType: "link",
        Extention: "webloc"
    },
    {
        FileType: "linkedfolder",
        Extention: "{}"
    },
    {
        FileType: "listitem",
        Extention: "{}"
    },
    {
        FileType: "loop",
        Extention: "fluid"
    },
    {
        FileType: "loop",
        Extention: "loop"
    },
    {
        FileType: "loop",
        Extention: "note"
    },
    {
        FileType: "loopworkspace",
        Extention: "{}"
    },
    {
        FileType: "officescript",
        Extention: "osts"
    },
    {
        FileType: "splist",
        Extention: "{}"
    },
    {
        FileType: "mcworld",
        Extention: "mcworld"
    },
    {
        FileType: "mctemplate",
        Extention: "mctemplate"
    },
    {
        FileType: "model",
        Extention: "3ds"
    },
    {
        FileType: "model",
        Extention: "3mf"
    },
    {
        FileType: "model",
        Extention: "blend"
    },
    {
        FileType: "model",
        Extention: "cool"
    },
    {
        FileType: "model",
        Extention: "dae"
    },
    {
        FileType: "model",
        Extention: "df"
    },
    {
        FileType: "model",
        Extention: "dwfx"
    },
    {
        FileType: "model",
        Extention: "dwg"
    },
    {
        FileType: "model",
        Extention: "dxf"
    },
    {
        FileType: "model",
        Extention: "fbx"
    },
    {
        FileType: "model",
        Extention: "glb"
    },
    {
        FileType: "model",
        Extention: "gltf"
    },
    {
        FileType: "model",
        Extention: "holo"
    },
    {
        FileType: "model",
        Extention: "layer"
    },
    {
        FileType: "model",
        Extention: "layout"
    },
    {
        FileType: "model",
        Extention: "max"
    },
    {
        FileType: "model",
        Extention: "mtl"
    },
    {
        FileType: "model",
        Extention: "obj"
    },
    {
        FileType: "model",
        Extention: "off"
    },
    {
        FileType: "model",
        Extention: "ply"
    },
    {
        FileType: "model",
        Extention: "skp"
    },
    {
        FileType: "model",
        Extention: "stp"
    },
    {
        FileType: "model",
        Extention: "stl"
    },
    {
        FileType: "model",
        Extention: "t"
    },
    {
        FileType: "model",
        Extention: "thl"
    },
    {
        FileType: "model",
        Extention: "x"
    },
    {
        FileType: "mpp",
        Extention: "mpp"
    },
    {
        FileType: "mpt",
        Extention: "mpt"
    },
    {
        FileType: "multiple",
        Extention: "one"
    },
    {
        FileType: "one",
        Extention: "{}"
    },
    {
        FileType: "onetoc",
        Extention: "ms-one-stub"
    },
    {
        FileType: "onetoc",
        Extention: "onetoc"
    },
    {
        FileType: "onetoc",
        Extention: "onetoc2"
    },
    {
        FileType: "onetoc",
        Extention: "onepkg"
    },
    {
        FileType: "pbiapp",
        Extention: "{}"
    },
    {
        FileType: "pdf",
        Extention: "pdf"
    },
    {
        FileType: "photo",
        Extention: "arw"
    },
    {
        FileType: "photo",
        Extention: "bmp"
    },
    {
        FileType: "photo",
        Extention: "cr2"
    },
    {
        FileType: "photo",
        Extention: "crw"
    },
    {
        FileType: "photo",
        Extention: "dic"
    },
    {
        FileType: "photo",
        Extention: "dicm"
    },
    {
        FileType: "photo",
        Extention: "dcm"
    },
    {
        FileType: "photo",
        Extention: "dcm30"
    },
    {
        FileType: "photo",
        Extention: "dcr"
    },
    {
        FileType: "photo",
        Extention: "dds"
    },
    {
        FileType: "photo",
        Extention: "dib"
    },
    {
        FileType: "photo",
        Extention: "dng"
    },
    {
        FileType: "photo",
        Extention: "erf"
    },
    {
        FileType: "photo",
        Extention: "gif"
    },
    {
        FileType: "photo",
        Extention: "heic"
    },
    {
        FileType: "photo",
        Extention: "heif"
    },
    {
        FileType: "photo",
        Extention: "ico"
    },
    {
        FileType: "photo",
        Extention: "jfi"
    },
    {
        FileType: "photo",
        Extention: "jfif"
    },
    {
        FileType: "photo",
        Extention: "jif"
    },
    {
        FileType: "photo",
        Extention: "jpe"
    },
    {
        FileType: "photo",
        Extention: "jpeg"
    },
    {
        FileType: "photo",
        Extention: "jpg"
    },
    {
        FileType: "photo",
        Extention: "jxr"
    },
    {
        FileType: "photo",
        Extention: "kdc"
    },
    {
        FileType: "photo",
        Extention: "mrw"
    },
    {
        FileType: "photo",
        Extention: "nef"
    },
    {
        FileType: "photo",
        Extention: "orf"
    },
    {
        FileType: "photo",
        Extention: "pct"
    },
    {
        FileType: "photo",
        Extention: "pict"
    },
    {
        FileType: "photo",
        Extention: "png"
    },
    {
        FileType: "photo",
        Extention: "pns"
    },
    {
        FileType: "photo",
        Extention: "psb"
    },
    {
        FileType: "photo",
        Extention: "psd"
    },
    {
        FileType: "photo",
        Extention: "raw"
    },
    {
        FileType: "photo",
        Extention: "tga"
    },
    {
        FileType: "photo",
        Extention: "tif"
    },
    {
        FileType: "photo",
        Extention: "tiff"
    },
    {
        FileType: "photo",
        Extention: "wdp"
    },
    {
        FileType: "photo360",
        Extention: "{}"
    },
    {
        FileType: "picturesfolder",
        Extention: "{}"
    },
    {
        FileType: "planner",
        Extention: "{}"
    },
    {
        FileType: "potx",
        Extention: "pot"
    },
    {
        FileType: "potx",
        Extention: "potm"
    },
    {
        FileType: "potx",
        Extention: "potx"
    },
    {
        FileType: "powerbi",
        Extention: "pbids"
    },
    {
        FileType: "powerbi",
        Extention: "pbix"
    },
    {
        FileType: "ppsx",
        Extention: "pps"
    },
    {
        FileType: "ppsx",
        Extention: "ppsm"
    },
    {
        FileType: "ppsx",
        Extention: "ppsx"
    },
    {
        FileType: "pptx",
        Extention: "ppt"
    },
    {
        FileType: "pptx",
        Extention: "pptm"
    },
    {
        FileType: "pptx",
        Extention: "pptx"
    },
    {
        FileType: "pptx",
        Extention: "sldx"
    },
    {
        FileType: "pptx",
        Extention: "sldm"
    },
    {
        FileType: "presentation",
        Extention: "odp"
    },
    {
        FileType: "presentation",
        Extention: "gslides"
    },
    {
        FileType: "presentation",
        Extention: "key"
    },
    {
        FileType: "pub",
        Extention: "pub"
    },
    {
        FileType: "spo",
        Extention: "aspx"
    },
    {
        FileType: "sponews",
        Extention: "{}"
    },
    {
        FileType: "spreadsheet",
        Extention: "odc"
    },
    {
        FileType: "spreadsheet",
        Extention: "ods"
    },
    {
        FileType: "spreadsheet",
        Extention: "gsheet"
    },
    {
        FileType: "spreadsheet",
        Extention: "numbers"
    },
    {
        FileType: "spreadsheet",
        Extention: "tsv"
    },
    {
        FileType: "rtf",
        Extention: "epub"
    },
    {
        FileType: "rtf",
        Extention: "gdoc"
    },
    {
        FileType: "rtf",
        Extention: "odt"
    },
    {
        FileType: "rtf",
        Extention: "rtf"
    },
    {
        FileType: "rtf",
        Extention: "wri"
    },
    {
        FileType: "rtf",
        Extention: "pages"
    },
    {
        FileType: "sharedfolder",
        Extention: "{}"
    },
    {
        FileType: "playlist",
        Extention: "{}"
    },
    {
        FileType: "sway",
        Extention: "{}"
    },
    {
        FileType: "sysfile",
        Extention: "bak"
    },
    {
        FileType: "sysfile",
        Extention: "bin"
    },
    {
        FileType: "sysfile",
        Extention: "cab"
    },
    {
        FileType: "sysfile",
        Extention: "cache"
    },
    {
        FileType: "sysfile",
        Extention: "cat"
    },
    {
        FileType: "sysfile",
        Extention: "cer"
    },
    {
        FileType: "sysfile",
        Extention: "class"
    },
    {
        FileType: "sysfile",
        Extention: "dat"
    },
    {
        FileType: "sysfile",
        Extention: "db"
    },
    {
        FileType: "sysfile",
        Extention: "dbg"
    },
    {
        FileType: "sysfile",
        Extention: "dl_"
    },
    {
        FileType: "sysfile",
        Extention: "dll"
    },
    {
        FileType: "sysfile",
        Extention: "ithmb"
    },
    {
        FileType: "sysfile",
        Extention: "jar"
    },
    {
        FileType: "sysfile",
        Extention: "kb"
    },
    {
        FileType: "sysfile",
        Extention: "ldt"
    },
    {
        FileType: "sysfile",
        Extention: "lrprev"
    },
    {
        FileType: "sysfile",
        Extention: "pkpass"
    },
    {
        FileType: "sysfile",
        Extention: "ppa"
    },
    {
        FileType: "sysfile",
        Extention: "ppam"
    },
    {
        FileType: "sysfile",
        Extention: "pdb"
    },
    {
        FileType: "sysfile",
        Extention: "rom"
    },
    {
        FileType: "sysfile",
        Extention: "thm"
    },
    {
        FileType: "sysfile",
        Extention: "thmx"
    },
    {
        FileType: "sysfile",
        Extention: "vsl"
    },
    {
        FileType: "sysfile",
        Extention: "xla"
    },
    {
        FileType: "sysfile",
        Extention: "xlam"
    },
    {
        FileType: "sysfile",
        Extention: "xlb"
    },
    {
        FileType: "sysfile",
        Extention: "xll"
    },
    {
        FileType: "todoitem",
        Extention: "{}"
    },
    {
        FileType: "txt",
        Extention: "dif"
    },
    {
        FileType: "txt",
        Extention: "diff"
    },
    {
        FileType: "txt",
        Extention: "readme"
    },
    {
        FileType: "txt",
        Extention: "out"
    },
    {
        FileType: "txt",
        Extention: "plist"
    },
    {
        FileType: "txt",
        Extention: "properties"
    },
    {
        FileType: "txt",
        Extention: "text"
    },
    {
        FileType: "txt",
        Extention: "txt"
    },
    {
        FileType: "vaultclosed",
        Extention: "{}"
    },
    {
        FileType: "vaultopen",
        Extention: "{}"
    },
    {
        FileType: "vector",
        Extention: "ai"
    },
    {
        FileType: "vector",
        Extention: "ait"
    },
    {
        FileType: "vector",
        Extention: "cvs"
    },
    {
        FileType: "vector",
        Extention: "dgn"
    },
    {
        FileType: "vector",
        Extention: "gdraw"
    },
    {
        FileType: "vector",
        Extention: "pd"
    },
    {
        FileType: "vector",
        Extention: "emf"
    },
    {
        FileType: "vector",
        Extention: "eps"
    },
    {
        FileType: "vector",
        Extention: "fig"
    },
    {
        FileType: "vector",
        Extention: "ind"
    },
    {
        FileType: "vector",
        Extention: "indd"
    },
    {
        FileType: "vector",
        Extention: "indl"
    },
    {
        FileType: "vector",
        Extention: "indt"
    },
    {
        FileType: "vector",
        Extention: "indb"
    },
    {
        FileType: "vector",
        Extention: "ps"
    },
    {
        FileType: "vector",
        Extention: "svg"
    },
    {
        FileType: "vector",
        Extention: "svgz"
    },
    {
        FileType: "vector",
        Extention: "wmf"
    },
    {
        FileType: "vector",
        Extention: "oxps"
    },
    {
        FileType: "vector",
        Extention: "xps"
    },
    {
        FileType: "vector",
        Extention: "xd"
    },
    {
        FileType: "vector",
        Extention: "sketch"
    },
    {
        FileType: "video",
        Extention: "3g2"
    },
    {
        FileType: "video",
        Extention: "3gp"
    },
    {
        FileType: "video",
        Extention: "3gp2"
    },
    {
        FileType: "video",
        Extention: "3gpp"
    },
    {
        FileType: "video",
        Extention: "asf"
    },
    {
        FileType: "video",
        Extention: "avi"
    },
    {
        FileType: "video",
        Extention: "dvr-ms"
    },
    {
        FileType: "video",
        Extention: "flv"
    },
    {
        FileType: "video",
        Extention: "m1v"
    },
    {
        FileType: "video",
        Extention: "m4v"
    },
    {
        FileType: "video",
        Extention: "mkv"
    },
    {
        FileType: "video",
        Extention: "mod"
    },
    {
        FileType: "video",
        Extention: "mov"
    },
    {
        FileType: "video",
        Extention: "mm4p"
    },
    {
        FileType: "video",
        Extention: "mp2"
    },
    {
        FileType: "video",
        Extention: "mp2v"
    },
    {
        FileType: "video",
        Extention: "mp4"
    },
    {
        FileType: "video",
        Extention: "mp4v"
    },
    {
        FileType: "video",
        Extention: "mpa"
    },
    {
        FileType: "video",
        Extention: "mpe"
    },
    {
        FileType: "video",
        Extention: "mpeg"
    },
    {
        FileType: "video",
        Extention: "mpg"
    },
    {
        FileType: "video",
        Extention: "mpv"
    },
    {
        FileType: "video",
        Extention: "mpv2"
    },
    {
        FileType: "video",
        Extention: "mts"
    },
    {
        FileType: "video",
        Extention: "ogg"
    },
    {
        FileType: "video",
        Extention: "qt"
    },
    {
        FileType: "video",
        Extention: "swf"
    },
    {
        FileType: "video",
        Extention: "ts"
    },
    {
        FileType: "video",
        Extention: "vob"
    },
    {
        FileType: "video",
        Extention: "webm"
    },
    {
        FileType: "video",
        Extention: "wlmp"
    },
    {
        FileType: "video",
        Extention: "wm"
    },
    {
        FileType: "video",
        Extention: "wmv"
    },
    {
        FileType: "video",
        Extention: "wmx"
    },
    {
        FileType: "video360",
        Extention: "{}"
    },
    {
        FileType: "vsdx",
        Extention: "vdx"
    },
    {
        FileType: "vsdx",
        Extention: "vsd"
    },
    {
        FileType: "vsdx",
        Extention: "vsdm"
    },
    {
        FileType: "vsdx",
        Extention: "vsdx"
    },
    {
        FileType: "vsdx",
        Extention: "vsw"
    },
    {
        FileType: "vsdx",
        Extention: "vdw"
    },
    {
        FileType: "vssx",
        Extention: "vss"
    },
    {
        FileType: "vssx",
        Extention: "vssm"
    },
    {
        FileType: "vssx",
        Extention: "vssx"
    },
    {
        FileType: "vstx",
        Extention: "vst"
    },
    {
        FileType: "vstx",
        Extention: "vstm"
    },
    {
        FileType: "vstx",
        Extention: "vstx"
    },
    {
        FileType: "vstx",
        Extention: "vsx"
    },
    {
        FileType: "whiteboard",
        Extention: "whiteboard"
    },
    {
        FileType: "whiteboard",
        Extention: "wbtx"
    },
    {
        FileType: "xlsx",
        Extention: "xlc"
    },
    {
        FileType: "xlsx",
        Extention: "xls"
    },
    {
        FileType: "xlsx",
        Extention: "xlsb"
    },
    {
        FileType: "xlsx",
        Extention: "xlsm"
    },
    {
        FileType: "xlsx",
        Extention: "xlsx"
    },
    {
        FileType: "xlsx",
        Extention: "xlw"
    },
    {
        FileType: "xltx",
        Extention: "xlt"
    },
    {
        FileType: "xltx",
        Extention: "xltm"
    },
    {
        FileType: "xltx",
        Extention: "xltx"
    },
    {
        FileType: "xml",
        Extention: "xaml"
    },
    {
        FileType: "xml",
        Extention: "xml"
    },
    {
        FileType: "xml",
        Extention: "xsl"
    },
    {
        FileType: "xsn",
        Extention: "xsn"
    },
    {
        FileType: "zip",
        Extention: "zip"
    }
)
```

</details>

このコンポーネントでは、フォルダー内の`ファイル名`や`URL`を取得します。
その値を、コンポーネントで埋め込むアプリケーションの、ほかのコントロールにて使用する場合は、出力プロパティに`テーブル型`を設定することで、参照することができます。

`response`という名前で出力プロパティを定義しました。

### ファイルをアップロードする入口を作成する
ファイルをアップロードする入口は[添付ファイル コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-attachments)が必須になります。
ユーザー側の操作イメージは、`ドラッグアンドドロップでファイルを添付する`ことのみに焦点を当てたいため、
`OnAddFile プロパティ`でファイルが追加されるタイミングで、`Graph API`を実行する仕様にしていきます。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-attachments

::: note info
`OnAddFile`プロパティは、ユーザーが新しい添付ファイルを追加したときに実行されます。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/b751e71b-03b4-9ff3-ac27-4f82d33fac13.png)


ざっくりと解説すると
1. `site_id`と`drive_id`を含めた`エンドポイント`を変数で設定する
1. 追加されたファイルに対して下記を実行
    1. **ファイルの存在の有無を確認**
    1. **ファイルが存在しない場合アップロード**
1. **フォルダの中に格納されたファイルの情報をコレクションに格納**
1. **添付ファイル コントロールをリセットする**

```javascript:OnAddFile
Set(
    _endpoint,
    $"https://graph.microsoft.com/v1.0/sites/{cmp_file_uploader.site_id}/drives/{cmp_file_uploader.drive_id}/root:/"
);
ForAll(
    Self.Attachments,
    IfError(
        Office365グループ.HttpRequest(
            $"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}",
            "GET",
            ""
        ),
        Office365グループ.HttpRequest(
            $"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}:/content",
            "PUT",
            ThisRecord.Value
        )
    )
);
ClearCollect(
    FolderChildren,
    ForAll(
        Office365グループ.HttpRequest(
            $"{_endpoint}{EncodeUrl(cmp_file_uploader.folder_name)}:/children",
            "GET",
            ""
        ).value,
        {
            name: Text(ThisRecord.name),
            webUrl: Text(ThisRecord.webUrl),
            lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime),
            lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)
        }
    )
);
Reset(Self);
```

`SharePoint Lists`の`添付ファイル列`と連動させるわけではないため、常にコントロールの中に、アップロードされたファイルが反映されることにはなりません。

**アップロードされたファイルは赤枠のフォルダー内のファイルを参照するギャラリー コントロールで表示します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e22014a5-3ad4-faf7-356d-4b1c08e586c9.png)

### ギャラリー コントロール
ギャラリー コントロールは下記の構成にします。

|項目名|コントロール|詳細|
|---|---|---|
|img_filetype|画像|`ファイル アイコン`を表示|
|lbl_filename|テキスト ラベル|`ファイル名`|
|lbl_lastmodifieddatetime|テキスト ラベル|`更新日時`|
|lbl_lastmodifiedby|テキスト ラベル|`更新者`|
|shp_gal_files|四角形|区切り線|

参照元は`FolderChildren`という`コレクション`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/a76551b2-93e6-f81f-82d3-50c509da6ff9.png)

ギャラリーコントロールに含める[画像 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-image)のImage プロパティに下記の関数を設定します。

```javascript:Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    LookUp(
        cmp_file_uploader.static_icon_table,
        Extention = Last(
            Split(
                ThisItem.name,
                "."
            )
        ).Value
    ).FileType,
    "genericfile"
)}.svg"
```

これにより、ファイルの拡張子をもとに、SharePointで参照するときのようにファイルのアイコンを表示することができます。

[過去にQiitaの記事で触れましたので、よろしければ見てみてください。](https://qiita.com/DEmodoriGatsuO/items/f374cc210b7d76553815#%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%82%E3%81%AE%E3%82%92%E4%B8%80%E8%A6%A7%E5%8C%96%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)

https://qiita.com/DEmodoriGatsuO/items/f374cc210b7d76553815#%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%82%E3%81%AE%E3%82%92%E4%B8%80%E8%A6%A7%E5%8C%96%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B

あとは、ファイル名とファイルのリンク、更新日時と更新者を`SharePoint`のドキュメントライブラリに寄せて作ってみます。
この大本は`Graph API`にて取得した戻り値から表示しています。

`Graph API`の戻り値は`Untyped Objects`と評価されます。
型を明示的に指定しないと、値を表示できません。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/untyped-and-dynamic-objects

```javascript:OnAddFileのコレクション格納部分
ClearCollect(
    FolderChildren,
    ForAll(
        Office365グループ.HttpRequest(
            $"{_endpoint}{EncodeUrl(cmp_file_uploader.folder_name)}:/children",
            "GET",
            ""
        ).value,
        {
            name: Text(ThisRecord.name),
            webUrl: Text(ThisRecord.webUrl),
            lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime),
            lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)
        }
    )
);
```

上記がコレクションのファイルの格納に該当する部分です。
明示的に型を指定した値を格納します。
- `name: Text(ThisRecord.name)`
- `webUrl: Text(ThisRecord.webUrl)`
- `lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime)`
- `lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)`

これで表示の準備が整いました。

### コンポーネントの動作
こちらの機能で実施することは、**ファイルのアップロード**がメインです。

しかし
- **フォルダが存在しない場合はフォルダを作成したい**
- **誤ってファイルを上書きすることは避けたい**

このようなニーズがあると思っています。
こちらについて対応を考えてみましょう。

#### フォルダが存在しない場合はフォルダを作成したい
こちらは特別注意をせずとも、フォルダが存在しない場合は、`{フォルダーパス}/{拡張子付きファイル名}`の組み合わせが含まれていれば、フォルダは作成されます。
特段`フォルダを作成する`機能を設けることは不要です。

#### 誤ってファイルを上書きすることは避けたい
上記のハンドリングを実現するために、`Graph API`と[IfError 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-iferror)を組み合わせて対処します。

```javascript:OnAddFileでファイルの存在を確認したうえで、ファイルの作成を実行している箇所
IfError(
    Office365グループ.HttpRequest(
        $"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}",
        "GET",
        ""
    ),
    Office365グループ.HttpRequest(
        $"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}:/content",
        "PUT",
        ThisRecord.Value
    )
)
```

こちらのアクションを実行することで、`ファイル(またはフォルダ)`の情報を取得することができます。
**`ファイル(またはフォルダ)`が存在しない場合は、変数に`Error`が格納されます。**

変数に格納された値が`Error`かどうかの判断でファイルの存在チェックが実現できるため、[IfError 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-iferror)で、Errorではないときに、ファイルをアップロードする動作を仕込めば課題が解決します。

:::note info
変数の格納自体が失敗するわけではなく、Errorという値が格納されるため、`IfError`関数でエラーハンドリングが実現できます。
:::

**あとはファイルがアップロードされたときに、フォルダの中身を再度取得し、ギャラリー コントロールに表示します。**

**ドラッグ アンド ドロップでクイックにファイルをアップロードできそうで非常に便利です。**

# おわりに
[Reza Dorrani](https://x.com/rezadorrani)氏の動画は無限に見ていられますね。**Power Platformで実現したいことは、ほとんどRezaが解決していると過言ではありません。**

**困ったときに彼の動画を見てみましょう。**

https://x.com/rezadorrani