ファイル一覧表示

ファイル一覧表示機能を作成し、Firebaseにアップロードしたファイルの一覧をアプリ上に表示させます。

ファイル一覧の表示エリア

まず、Firebaseにアップロードしたファイルの一覧を表示させるエリアを次のように準備します。 ボタン「ファイル一覧を表示」をクリックすると、<ul id="files-list"></ul>の中にファイル情報が追加されます。

<section>
    <h2>ファイル一覧</h2>
    <button id="list-files-button">ファイル一覧を表示</button>
    <ul id="files-list"></ul>
</section>

Firestoreからファイル一覧を取得する

Firebase Firestoreから取得したファイルの一覧を表示するための関数です。Firestoreの files コレクションにあるすべてのドキュメントを取得し、それらをリスト形式で表示します。

https://github.com/monaca-samples/firebase-storage/blob/master/www/js/listFiles.js

export const displayFileList = async () => {
  const filesList = document.getElementById("files-list");
  filesList.innerHTML = ""; // 一覧をクリア

  try {
    // Firestoreから"files"コレクションのドキュメントを取得
    const querySnapshot = await getDocs(collection(firestore, "files"));
    querySnapshot.forEach((doc) => {
      const data = doc.data();
      // テンプレートリテラルを使用してリストアイテムを作成
      const listItem = `
        <li>
          <input type="checkbox" value="${doc.id}"> ${data.name}
        </li>
      `;
      // innerHTMLを使用してリストアイテムを追加
      filesList.innerHTML += listItem;
    });
  } catch (error) {
    console.error("Error listing files: ", error);
  }
};

処理の流れ:

1. ファイルリスト表示エリアの準備:

   • document.getElementById("files-list") で、ファイル一覧を表示するHTML要素を取得します。

   • filesList.innerHTML = "" で、以前のファイル一覧をクリアします。

2. Firestoreからのドキュメント取得:

   • getDocs(collection(firestore, "files")) を使用して、Firestoreの files コレクションにある全ドキュメントを取得します。

3. ファイル一覧の表示:

   • querySnapshot.forEach を使用して、取得したドキュメントのリストを繰り返し処理します。

   • 各ドキュメントから doc.data() でデータを取得し、リストアイテムのHTMLをテンプレートリテラルで作成します。

   • 各リストアイテムには、チェックボックス（<input type="checkbox">）とファイル名が含まれます。チェックボックスの value 属性にはドキュメントのIDが設定されます。

   • filesList.innerHTML += listItem で、新しいリストアイテムをファイル一覧に追加します。