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

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

まずは、フォームを作成します。

<form onSubmit={handleSubmit}>
  <input type="file" onChange={handleChange} />
  <button className="button">送信</button>
</form>

画像を状態管理するために、useStateを使用します。

const [image, setImage] = useState()

firebaseAppfirestorageを使用します。

const firestorage = firebaseApp.firestorage

ファイルを選択できるように、handleChange関数を作成します。

handleChangeを作成し、setImageに選択したファイルのデータを管理します。

const handleChange = e => {
  setImage(e.target.files[0])
}

送信ボタンを押した後、Firebase へ画像を送信できるようにします。

handleSubmit 関数を作成します。

const handleSubmit = e => {
  e.preventDefault()

  console.log(image)
}

試しに、画像を選択してみましょう。

image2

送信ボタンをクリックし、Console で確認すると、

image3

image に画像の情報が入っていました。

では、Firebase へ送信するために、try/catch を使用します。

送信できなかった場合、Console にエラーを表示するようにします。

try {
} catch (err) {
  console.log(err)
}

どの Firebase に保存するかをしていするために、refを使用します。

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

import { ref } from "firebase/storage"

ref の第一引数には firestorage、第二引数には保存したいファイル名を指定します。

保存したいファイル名は、image の name を指定しましょう。

try {
  const imageRef = ref(firestorage, image.name)
} catch (err) {
  console.log(err)
}

画像を送信するために、uploadBytesを使用します。

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

import { ref, uploadBytes } from "firebase/storage"

uploadBytes の第一引数にimageRef、第二引数にimageを指定します。

送信に成功した場合、Console にメッセージを表示するようにします。

try {
  const imageRef = ref(firestorage, image.name)

  uploadBytes(imageRef, image).then(() => {
    console.log("Uploaded a file!")
  })
} catch (err) {
  console.log(err)
}

一通り完成したので、実際に送信してみます。

image4

送信ボタンをクリックすると、

image5

Console に送信が成功したメッセージが表示されました。

Firebase console へアクセスし、Storege を確認すると、

image6

先程送信した画像が保存されていました。

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

ブログ一覧