firebaseのバージョンが9系になって、コードの書き方が結構変わっています。今回は、モジュール版でのfirebase storageにファイルをアップロードする方法をまとめます。
結論
公式ドキュメントでは古い記述方法が記載されている？ようで少し迷走していたのですが、こちらの記事が参考になりました。
Storage｜Modular JavaScript SDK
fileデータからアップロードする際は、uploadBytesResumableという関数を使用してファイルのアップロードを行うようです。
コード例
参考元から引用しています。
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
const storage = getStorage();
const imageRef = ref(storage, 'images/' + file.name);
uploadBytesResumable(imageRef, file, metadata)
.then((snapshot) => {
console.log('Uploaded', snapshot.totalBytes, 'bytes.');
console.log('File metadata:', snapshot.metadata);
// Let's get a download URL for the file.
getDownloadURL(snapshot.ref).then((url) => {
console.log('File available at', url);
// ...
});
}).catch((error) => {
console.error('Upload failed', error);
// ...
});ストレージパッケージ
その他の関数の情報は公式ドキュメントを参照してみてください。モジュール版は関数を一つ一つ呼び出す必要があって面倒なので、目に見えて軽量化の恩恵が受けられていると実感できたら嬉しいなと思います。
ストレージパッケージ｜公式ドキュメント
まとめ
v8版であれば他で使用した関数が使えたものの、モジュール版になって再度新しく関数を作成する必要があって少し残念です。とはいえ、メジャーアップデートに伴う仕様変更は宿命なので、耐え忍びながら対応していこうと思います。
参考
Storage｜Modular JavaScript SDK
ストレージパッケージ｜公式ドキュメント
この記事にコメントする
このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。