前回は、ブラウザで送信した画像を、Firebase の Storage に保存しました。

今回は、Firebase Storage に保存している画像を削除します。

まずは、削除ボタンを作成します。

<button onClick={() => handleClick()} className="delete">
  削除
</button>

先日作成した、firebaseApp の firestorage から firestorage を使用します。

const firestorage = firebaseApp.firestorage

firebase/storageからrefをインポートします。

ref を使って画像を参照します。

ref の第一引数には firestorage、第二引数には Firebase Storage ファイル一覧にある、gs から始まる文字列+/ファイル名を指定します。

const gsReference = ref(
  firestorage,
  "gs://test-books-94742.appspot.com/azuki.png"
)

handleClick 内を非同期で設定します。

const handleClick = async () => {}

Firebase Storage の削除をするために、deleteObjectを使用します。

firebase/storageからdeleteObjectをインポートします。

import { ref, deleteObject } from "firebase/storage"

deleteObject に gsReference を指定します。

削除に成功した場合、Console に成功のメッセージ、失敗した場合、Console にエラーメッセージを表示させます。

const handleClick = async () => {
  await deleteObject(gsReference)
    .then(() => {
      console.log("File deleted successfully")
    })
    .catch(err => {
      console.log(err)
    })
}

一通り完成したので、確認します。

image2

削除ボタンをクリックし、Console を確認すると、

image3

削除が成功した様です。

Firebase Storage へアクセスし、画像が削除されているか確認します。

image4

保存していた画像が、削除されていました。

次回は、作成したプロジェクトを FIrebase Hosting へデプロイします。

ブログ一覧