Help us understand the problem. What is going on with this article?

[Firebase]Storage上のファイル名一覧を表示する

前提条件・環境

手順

1. ルールの書き換え

ListAPIの使用にはFirebase Storage Rules バージョン2が必要なため、Storageにルールを加えます。デフォルトではFirebaseにログインしないと読み書きできないので、必要に応じて書き換えます。今回はテスト用に特に制限を設けません。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

2. SDKインポート

<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js">

※上記SDKを追加しないと下記エラーになります。
 "firebase.storage is not a function"

3. 参照の取得

var storage = firebase.storage();
var storageRef = storage.ref();

4. リスト表示

listAPIを使ってファイル参照一覧を取得します。

storageRef.listAll().then(function(result) {
  result.items.forEach(function(ref) {
  // 処理
  });
}).catch(function(error) {
  console.error(error);
});

デモコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
</head>
<body>
  <p>Storageファイル一覧</p>
  <div id="table"></div>
  <script>
    var firebaseConfig = {
      ===== 省略 =======

      =================
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    // Get a reference to the storage service, which is used to create references in your storage bucket
    var storage = firebase.storage();

    // Create a storage reference from our storage service
    var storageRef = storage.ref();

    document.addEventListener('DOMContentLoaded', function() {
      var table = document.createElement( 'table' );
      var tableBody = document.createElement("tbody");

      storageRef.listAll().then(function(result) {
        result.items.forEach(function(ref) {
          var row = document.createElement("tr");
          var cell = document.createElement("td");
          cell.appendChild(document.createTextNode(ref.name));
          row.appendChild(cell);
          tableBody.appendChild(row);
          table.appendChild(tableBody);
        });
        document.getElementById("table").appendChild(table);
      }).catch(function(error) {
        console.error(error);
      })
    });
  </script>
</body>
</html>

結果

demo.png

参考サイト

ウェブでファイルのリストを取得する
How to get a list of all files in Cloud Storage in a Firebase app?

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away