FirebaseのCloud Storageに画像をアップロードする方法

はじめに

今回は画像を選択して送信を押すと画像をアップロードする実装をFirebaseのCloud Storageを使って行ったのでその過程を収めていこうと思います！！
　　　　　　　　　↓のようなformを作成して画像をアップロードしようと思ってます。

※なお、Firebaseのインストールや初期化処理、認証トークンは他の方でも説明されているので割愛させていただきます。
以下にわかりやすい方のリンクを掲載させていただきます
Firebaseの始め方

FirebaseのCloud Storageについて

Cloud Storage for Firebaseとは

Cloud Storage for Firebaseとは写真や動画などのバイナリーデータを保存することができます。
FirebaseではCloud Storage用のFirebase SDKを使用して、クライアントアプリケーションからファイルのアップロードやダウンロードを行うことができます。
まあ簡単に言うと画像や動画をアップロードしておいて自由に呼び出して使うことができるっぽい!!

Cloud Storage for Firebaseの使い方

00.firebaseをimport

profiles/index.tsx

import firebase from "../../lib/firebase";

まず先に初期化設定、認証トークンを設定したfirebaseのファイルをimportします。
↓こんな感じのファイルをimport!!

lib/firebase.tsx

import firebase from "firebase";

const firebaseConfig = {
  apiKey: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  authDomain: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  databaseURL: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  projectId: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  storageBucket: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  messagingSenderId: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
  appId: ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊,
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

export default firebase;

01.画像をアップロード

早速画像をアップロードしていきます！
画像をアップロードするときはputメソッドを使用します。

profiles/index.tsx

upLoadImage(event) {
  const file = event.target.files[0];//アップロードする画像を取得
  const storage = firebase.storage();//storageを参照
  const storageRef = storage.ref("images");//どのフォルダの配下に入れるか
  const imagesRef = storageRef.child(`${user.uid}.jpg`);//ユーザーを指定してその配下に画像をアップロード
  const upLoadTask = imagesRef.put(file);
   upLoadTask.on(
      "state_changed",
      (snapshot) => {
        console.log("snapshot", snapshot);
      },
      (error) => {
        console.log("err", error);
      },
      () => {
        upLoadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
          console.log("File available at", downloadURL);
        });
      }
    );
  });
}

consoleでUploadTaskの動作確認、アップロードした画像のURLを取得できます。

02.画像入力フォームの作成

profiles/index.tsx

<Input
  type="file"
  name="file"
  onChange={(event) => this.upLoadImage(event)}//変更があったときにupLoadImageを呼ぶ
  onClick={(event) => {
    event.target.value = "";
  }}
/>

これで入力フォームの完成です。画像を入れるだけで処理が走るので画像のアップロードも完成なんですが、とりあえず登録ボタンもつけておきましょう（笑）

profiles/index.tsx

<Button style={buttonstyle} type="submit">
  登録
</Button>

今回はReactでBootstrapを使ってますが適宜自由なデザインをお使いください！！
ちなみにCloud Storageには以下のようにアップロードされています。

感想

画像をアップロードしてURLを取得するだけならそんなに手順も多くなかったです。
ここからこの画像のURLをデータベースの方で使ったり表示させたり、、
色々試してやっていこうと思います！

参考文献

React✕Cloud Storageでの画像アップロード

https://coders-shelf.com/react-firebase-image-upload/

Firebase入門 - ファイル保存&管理機能を利用する

https://qiita.com/t_furu/items/ef99e9d48b9c3c9af7f1