ファイルアップロード
Firebaseを使用してファイルをアップロードするプロセスについて説明します。
Firebaseの2つの主要なサービス、Firebase StorageとFirebase Firestoreを使用して構築していきます。
ファイルアップロードの画面
画面上で、ユーザーはファイル名を入力し、ファイルを選択した後、アップロードボタンをクリックすることで、ファイルをFirebaseにアップロードできます。
<section>
<h2>ファイル・アップロード</h2>
<p>ファイル名: <input type="text" id="file-name" /></p>
<p>
ファイル: <input type="file" id="file-data" />
<button id="upload-button">アップロード</button>
</p>
<div id="upload-result"></div>
</section>
物理的なファイルのアップロードにはFirebase Storageを利用し、それに関連するメタデータはFirebase Firestoreに保存されます。
具体的には、ユーザーがアップロードするファイル自体はFirebase Storageに保管。これにアクセスするための情報(ファイル名、MIMEタイプ、アップロード日時など)はFirestoreのドキュメントとして保存されます。
Firestoreへ情報を保存する
次の関数は、Firestoreにファイルに関する基本的な情報(ファイル名、MIMEタイプ、作成日)を保存します。
Unexpected error with integration github-files: Integration is not installed on this space
// Firestoreにメタデータを保存する関数
async function saveMetadata(fileName, mimeType) {
// 新しいドキュメントを作成し、ファイル名、MIMEタイプ、作成日を保存
return await addDoc(collection(firestore, "files"), {
name: fileName,
mimeType: mimeType,
createDate: new Date(),
});
}
この関数は2つのパラメータを取ります:
fileName
(ファイル名)とmimeType
(MIMEタイプ)。Firestoreのコレクション参照:
collection(firestore, "files")
は、Firestoreのfiles
という名前のコレクションへの参照を取得します。ドキュメントの追加:
addDoc
関数は、新しいドキュメントをコレクションに追加します。このドキュメントには、fileName
、mimeType
、そして現在の日付が含まれます。
FireStorageへファイルを保存する
物理的なファイルは、Firebase Storageに保存します。
Firebase Storageにファイルをアップロードするための関数は次のようになります。
async function uploadFile(docId, fileData) {
// Storageの参照を作成
const storageRef = ref(storage, "files/" + docId);
// ファイルをアップロード
await uploadBytes(storageRef, fileData);
// ダウンロードURLを取得
const downloadURL = await getDownloadURL(storageRef);
// Firestoreのドキュメントを更新してダウンロードURLを保存
await updateDoc(doc(firestore, "files", docId), {
downloadURL: downloadURL
});
}
この関数は、指定されたドキュメントID (docId
) とファイルデータ (fileData
) を引数に取り、ファイルデータをFirebase Storageにアップロード。次に、アップロードしたファイルのダウンロードURLをFirestoreのドキュメントに保存します。
コードの詳細は次のとおりです。
Firebase Storage へのファイルアップロード:
Firestore ドキュメントのIDを引数にとり、アップロードするファイルの名前をこのIDで登録します。
const storageRef = ref(storage, "files/" + docId);
storage
は Firebase Storage のインスタンスを指します。ref
関数を使って、Firebase Storage 内のfiles/
ディレクトリにdocId
を基にした参照を作成します。
await uploadBytes(storageRef, fileData);
参照先(
storageRef
)にファイルデータ(fileData
)をアップロードします。
ダウンロードURLの取得:
getDownloadURL
関数は、アップロードされたファイルのダウンロードURLを取得します。
Firestore の更新:
updateDoc
関数は、Firestore の指定されたドキュメント(docId
を使用してfiles
コレクション内のドキュメントを参照)を更新します。FireStoreドキュメントは、取得したダウンロードURL(
downloadURL
)で更新されます。
最終更新
役に立ちましたか?