JavascriptでCloud Storage for Firebaseを操作する

はじめに

この記事ではJavascriptでCloud Storage for Firebaseのデータを取得・更新・削除する方法について書いています。

公式ドキュメントを参考にしています。

前提

• Cloud Storage for Firebaseの構築が済んでいる
• Cloud Storage for Firebaseに接続できる状態

Cloud Storage for Firebaseを操作する

下記の方法について説明しています。

1. アップロード
2. ダウンロード
3. 削除

上記のどの操作でもストレージへの参照を作って、その参照先のデータを操作するという流れは共通しています。

アップロード

大きく下記の2通りのアップロード方法について書いています。

1. FileオブジェクトかBlobオブジェクトを使ってアップロードする
2. Base64などの文字列を使ってアップロードする

FileオブジェクトかBlobオブジェクトを使ってアップロードする

まずは参照を作成します。

import { getStorage, ref } from 'firebase/storage'

const storage = getStorage()
const storageRef = ref(storage, 'image.png')

refの第二引数にファイルのフルパスを指定します。こちらがアップロード先になります。
下記のように階層をつけることもできます。

storageRef = ref(storage, 'foo/image.png')

次にアップロードする方法ですが、uploadBytesというメソッドを使います。

import { getStorage, ref, uploadBytes } from 'firebase/storage'

const storage = getStorage()
const storageRef = ref(storage, 'foo/image.png')

uploadBytes(storageRef, file).then((snapshot) => {
    console.log(snapshot.metadata.name) // image.png
    console.log(snapshot.metadata.fullPath) // foo/image.png
})

第一引数には先ほど作成した参照入れて、第二引数にはFileオブジェクトかBlobオブジェクトを入れます。 返り値のsnapshotにはファイルの参照データやメタデータが格納されています。

ここには書きませんが、他にバイト配列を使ってアップロードする方法もあります。

Base64などの文字列を使ってアップロードする

文字列からアップロードするにはuploadStringメソッドを使います。
下記はBase64の文字列でアップロードする例です。

import { getStorage, ref, uploadString } from 'firebase/storage'

const storage = getStorage()
const storageRef = ref(storage, 'foo/image.png')

uploadString(storageRef, base64, 'base64').then((snapshot) => {
    console.log(snapshot.metadata.name)
    console.log(snapshot.metadata.fullPath)
})

第二引数にbase64の文字列、第三引数に文字列の形式を入れます。
下記のように第二引数に文字列を入れてテキストファイルをアップロードすることもできます。この場合は第三引数を省略します。

uploadString(storageRef, 'Hello World').then((snapshot) => {
    console.log(snapshot.metadata.name)
    console.log(snapshot.metadata.fullPath)
})

取得

getDownloadURLというメソッドを使ってurlを取得します。

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

const storage = getStorage()
const storageRef = ref(storage, 'foo/image.png')

getDownloadURL(storageRef)
    .then((url) => {
        const img = document.getElementById('myimg')
        img.setAttribute('src', url)
    })
    .catch((error) => {})

getDownloadURLの引数にファイルへの参照を入れています。返り値はファイルのurlで、それをimgタグにセットしています。

ちなみにこの方法にはurlを知っていればアクセスし放題というセキュリティ的な問題があります。urlを限られた人にしか共有しないのであれば大丈夫かもしれません。このことついては下記の記事で詳しく書かれています。

削除

deleteObjectというメソッドを使用します。

import { getStorage, ref, deleteObject } from 'firebase/storage'

const storage = getStorage()
const storageRef = ref(storage, 'foo/image.png')

deleteObject(storageRef).then(() => {}).catch((error) => {})

引数には参照を入れます。返り値はありません。

参考