FirebaseのStorageで画像をアップロードする時のタイプ指定で躓いた話し
皆様こんにちは。sakuyaです。
今回は、私がFirebaseのStorageを使って画像のアップロードをしたときのことを書いていこうかと思います。
そもそもFirebaseのStorageで何ができるのか
FirebaseのStorageでは、比較的簡単に画像などのアップロードやダウンロードといったこともできるものになっています。また、Googleが提供しているサービスで、制限はありますが無料で使えるので「手軽にはじめてみたい」という人にはお勧めできるのはないかと思います。
それでは本題
私は以前にFirebaseのStorageを使って画像のアップロード機能をNext.jsで作ろうとしたときがありました。その際に、公式のドキュメントを参考にしながら下記のように作っていきました。
※抜粋して表示しています。
const metadata = {
};
const storageRef = ref(storage , 'images/' + image.name);
const uploadTask = uploadBytesResumable(storageRef, image, metadata);
まあ、分かる人が見ればすぐに気づくとは思いますが、metadataの部分でタイプの指定をして、アップロードをする際にそれをあてはめています。
上記ではmetadataでタイプの指定をしているのですが、この部分をinpuptタグでfileタイプを使う際にacceptで複数指定をするのと同じように指定すると、エラーで正しいタイプでアップロードすることができませんでした。私の指定の仕方がよくない可能性もあるので絶対にできないとは言えないですが、実装する際は皆さまお気をつけください・・・。
最後に
今回ご紹介した内容ですが、最終的にはちゃんと画像のアップロード機能を実装することができたので、特に問題はなかったです。でも、最低限タイプ等の指定はしておかないと、画像として認識されないタイプでアップロードされてしまうので気を付けてください。※1
※1 少し補足説明
const uploadTask = uploadBytesResumable(storageRef, image, metadata);
タイプの指定も大事ですが、上記のように書いた際にimageの部分は指定しなくてもアップロード自体はできます。ただし、アップロードしたい画像のデータをimageに入れているので、その部分が空白だとデータがない状態でアップロードしてしまうために画像として認識されません。
