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

#はじめに
今回は画像を選択して送信を押すと画像をアップロードする実装をFirebaseのCloud Storageを使って行ったのでその過程を収めていこうと思います！！
　　　　　　　　　↓のようなformを作成して画像をアップロードしようと思ってます。
![スクリーンショット 2020-09-30 11.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/df6ba8e3-f21d-75bf-2c47-7c84edb205ef.png)

※なお、Firebaseのインストールや初期化処理、認証トークンは他の方でも説明されているので割愛させていただきます。
以下にわかりやすい方のリンクを掲載させていただきます
[Firebaseの始め方](https://qiita.com/kohashi/items/43ea22f61ade45972881)

#FirebaseのCloud Storageについて
####Cloud Storage for Firebaseとは
[Cloud Storage for Firebase](https://firebase.google.com/docs/storage?hl=ja)とは写真や動画などのバイナリーデータを保存することができます。
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);
        });
      }
    );
  });
}
```
![スクリーンショット 2020-09-30 12.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/9222418d-ba83-2c01-d744-dec600114ac1.png)
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には以下のようにアップロードされています。
![スクリーンショット 2020-09-30 12.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/219cd491-5245-712f-8fae-8f4b2189d984.png)

###感想
画像をアップロードしてURLを取得するだけならそんなに手順も多くなかったです。
ここからこの画像のURLをデータベースの方で使ったり表示させたり、、
色々試してやっていこうと思います！
###参考文献
>React✕Cloud Storageでの画像アップロード
>>https://coders-shelf.com/react-firebase-image-upload/

>Firebase入門 - ファイル保存&管理機能を利用する
>>https://qiita.com/t_furu/items/ef99e9d48b9c3c9af7f1