はじめに

Reactでfirebaseへファイル(画像)を保存してみようと思い、試してみましたので、同じような初心者の方に向けて記事を書いてみました。

コードはこちら
https://github.com/daikidaiki1583/Works/tree/master/work11
(コメントが残ってあったりして見苦しい部分があるかと思いますが目をつぶって頂ければ幸いです)また、ご意見等あれば頂ければと思います！！

では早速...

putメソッド

    put(File)

これがストレージにファイルを保存するためのメソッド。
引数にはFileまたはBlobインスタンスを指定する必要がある。(今回Blobは試してないです)
このputメソッドを実施するために必要な知識を以下で説明。

File()

    new File('①配列','②name','③option')

putメソッドの引数として渡すためにFileオブジェクトを渡す必要がある。

①ではinputタグのtype='file'で取得した配列を追加
②はよくわからないけど、'.png'とした。
③はここでは必須項目。typeを指定しないと、ファイルの種類がapplication/octet-streamになり、firebaseストレージ内でファイルの種類が特定されなかった。ここではtype:image/pngと指定した。

    const file = new File(this.file.current.files,'.png',{type:'image/png'})
    //変数fileをputメソッドの引数として渡す
    //this.file.current.filesはinputタグtype='file'で取得した配列を取得するコード

ストレージ参照の作成

https://firebase.google.com/docs/storage/web/create-reference

やっていることとしては、ストレージへの通り道を作っているイメージです。

Reactということで、ClassComponentのconstructor内部でrefメソッドを変数に代入して使いやすくした。下記のように、続けてchildメソッドを実行。引数としてストレージ内部のフォルダ名(ここではimages)と、ストレージに保存する画像につける名前(ここではimages3)をpathの形式で指定。その後に続けて前述のputメソッドを実行することでファイルをストレージに保存できる。

putメソッドはPromiseが返るようなので、thenとcatchで成功失敗に備える。

　//firebaseに関係ある部分のコードの抜粋です。

  constructor(){
    super()

    this.storageRef = storage.ref()

  }

  this.storageRef.child('images/images3').put(file)
  .then(snapshot=> console.log('成功'))
  .catch(error => console.log(error))

※認証について

firebaseStorageの初期設定では、認証されたユーザーしかストレージへのファイルの読み書きができない設定になっている。今回は認証機能をコーディングせずfirebaseStorageを使用したため、firebaseコンソールでルールを書きかえる必要があった。

    //初期設定
    rules_version = '2';
    service firebase.storage {
    match /b/{bucket}/o {
        match /{allPaths=**} {
        allow read, write: if request.auth != null;　//認証されたユーザーだけが読み書きできる。
        }
    }
    }

    //変更後　認証不要な設定に書き換えた
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
    	allow read,write;
    }
  }
}

終わり

誰かの役に立てればうれしく思います！