概要

storageを使う際にコピペで動かしたいのでそのまとめです。

公式ドキュメント

初期設定

インストール

$ npm install firebase --save

storage初期化

import firebase from "firebase/app"

const firebaseConfig = {
    /* firebase config */
}

// 初期化は一度だけ
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

storage参照

const storage = firebase.storage()

アップロード

put()

アップロードが成功すると画像までのURLが取得できる
※ダウンロードURLをローカルDBやFirestoreへ保存しておく

storage
  .ref()
  .child(<ファイル名>または<ディレクトリー名>/<ファイル名>)
  .put(<ファイル>).then(snapshot => {
      // success
      const url = snapshot.ref.getDownloadURL();
      console.log(url) // ダウンロードURL
  }).catch(error => {
      // error
  });

オプション

メタデータを追加

参考

const metadata = {
  contentType: 'image/jpeg',
};

storage
  .ref()
  .child(<ファイル名>または<ディレクトリー名>/<ファイル名>)
  .put(<ファイル>, metadata);

ダウンロード

getDownloadURL()

ダウンロードパスを取得

storage
  .ref()
  .child(<ファイル名>または<ディレクトリー名>/<ファイル名>)
  .getDownloadURL()
  .then(function(url) {
    console.log(url) // ダウンロードURL
  }

削除

delete()

削除したい画像のダウンロードURLを指定するだけ

storage
  .refFromURL(<ダウンロードURL>)
  .delete().then(() => {
      // success
  }).catch(error => {
      // error
  });

リサイズ

CloudFunctionsを使います
以下公式のサンプルをコピーして少し改良する
firebase/functions-samples

1, サービスアカウント用の秘密鍵ファイルを生成し初期化時に認証情報を追加する
サーバーに Firebase Admin SDK を追加する

- admin.initializeApp();
+ const serviceAccount = require(<サービス アカウント用の秘密鍵ファイルへのパス>);
+ admin.initializeApp({
+   credential: admin.credential.cert(serviceAccount),
+   databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
+   storageBucket: "gs://<プロジェクト ID>.appspot.com"
+ });

2, realtime databaseを使用していない場合以下を削除

- // Add the URLs to the Database
- await admin.database().ref('images').push({path: fileUrl, thumbnail: thumbFileUrl});
- return console.log('Thumbnail URLs saved to database.');

コピペで使うFirebase【Cloud Storage編】

概要