Firebase

【Firebase】Firebase Storageの画像を削除する

作成日：2022年02月18日

更新日：2022年02月19日

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

【Firebase】ブラウザで送信した画像を、FirebaseのStorageに保存する

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

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

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

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

jsx
const firestorage = firebaseApp.firestorage;

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

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

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

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

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

jsx
const handleClick = async () => {};

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

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

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

deleteObject に gsReference を指定します。

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

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

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

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

削除が成功した様です。

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

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

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

【Firebase】作成したプロジェクトをFirebase Hostingへデプロイする

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Firebase】Firebase Storageの画像を削除する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する