firebaseのStorageの指定フォルダからファイルを取得( Vue, Nuxt, TypeScript)

firebaseのStorageの指定フォルダからファイルを取得

こちらを業務でやることになったので備忘録でかきこ
チートシート目的ですね。

公式にすべて記載あり

firebaseの公式に記載ありますが、こちとら業務で取得確認までしなきゃなのでやり方を下記に記載して自身のやり方を残しておきます。

取得はコンソールのStorageに記載あるgs://hogehoge~~.comを利用して取得

今回はちょっと変わっていて指定フォルダ先にあるCSVファイルを全取得します。

ファイル名は日付_test.csvで登録されているものとします。
ex) 202406291230_test.csv

普段であれば、下記path指定すれば必要とするファイルがとれますが、今回は最新のものを取りたいので全件取得で比較することになりました。

const gerUrl = `gs://{BUCKET}/csv/202407011234_test.csv`

全件取得バージョン

import {
  getDownloadURL,
  getStorage,
  listAll,
  ref,
  type StorageReference,
} from 'firebase/storage'

  const getCsv = async () => {
　　const storage = getStorage()
    const gerUrl = `gs://{BUCKET}/csv/`
    const gsfileRef = ref(storage, gerUrl)

    let csvUrl: StorageReference | null = null
    let latestDate = 0

    listAll(gsfileRef)
      .then(async (res) => {
        res.items.forEach((itemRef) => {
          // fileの日付取得
          const dayNum = parseInt(itemRef.name.substring(0, 12))
          // 最新のfile取得
          if (latestDate === 0 || dayNum > latestDate) {
            csvUrl = itemRef
            latestDate = dayNum
          }
        })

     if (csvUrl !== null) {
          const url = await getDownloadURL(csvUrl)
          const response = await fetch(url)
          console.log(response.text())
     }
    })

Storageの中にある最新のデータをファイルの名前で見分ける方法として下記の様になりました。

何も考えずにStorageに画像やファイルを保存していたら取得時は大変なので気を付けましょう。