Monaca Docs
質問…
K

ファイル削除

ファイル一覧表示処理で表示されたリストを対象に、ユーザーが複数ファイルを選択して削除する機能を作成していきます。
ファイル削除機能では、次の2つの処理を用意します。
  1. 1.
    deleteSelectedFiles() : 削除する対象ファイルを特定する処理
  2. 2.
    deleteFile() : Firebase FirestoreとFirebase Storageから特定のファイルを削除する処理

deleteSelectedFiles 関数

ファイル一覧上でチェックされたファイルを特定し、ファイルを削除するdeletelFile 関数に識別子(docId)を渡します。
export const deleteSelectedFiles = async () => {
// チェックボックスがチェックされているものを全て取得
const checkedBoxes = document.querySelectorAll(
"#files-list input[type='checkbox']:checked"
);
// 各チェックボックスに対して
for (const checkbox of checkedBoxes) {
// ドキュメントIDを取得
const docId = checkbox.value;
// ファイルを削除
await deleteFile(docId);
}
// ファイル一覧を再表示
displayFileList();
};

処理の流れ:

  1. 1.
    チェックされたファイルの識別:
    • document.querySelectorAll("#files-list input[type='checkbox']:checked") を使用して、IDが files-list の要素内にある、チェックされたチェックボックスを全て取得します。
  2. 2.
    選択されたファイルの削除:
    • 各チェックボックスから value 属性を読み取り(これはドキュメントIDに対応しています)、deleteFile 関数を呼び出して、そのIDに対応するファイルを削除します。
    • deleteFile は、FirestoreとFirebase Storageの両方からファイルを削除する関数です。
  3. 3.
    ファイル一覧の再表示:
    • displayFileList() 関数を呼び出して、ファイル一覧を更新します。これにより、削除されたファイルが一覧から取り除かれます。

deleteFile 関数

Firebase FirestoreとFirebase Storageから特定のファイルを削除します。この関数により、FirestoreとFirebase Storageの両方から関連するファイルとメタデータを同時に削除できます。
async function deleteFile(docId) {
try {
// Firestoreからドキュメントを削除
const docRef = doc(firestore, "files", docId);
await deleteDoc(docRef);
// Firebase Storageからファイルを削除
const storageRef = ref(storage, "files/" + docId);
await deleteObject(storageRef);
console.log(`File deleted: ${docId}`);
} catch (error) {
console.error(`Error deleting file: ${docId}`, error);
}
}
パラメータ:docId: 削除するファイルのドキュメントIDを表します。
処理の流れ:
  1. 1.
    Firestoreからのドキュメント削除:
    • doc(firestore, "files", docId) を使用して、Firestore内の files コレクションにある特定のドキュメント(ファイル)への参照を取得します。
    • deleteDoc(docRef) を使用して、上記で取得したドキュメント(ファイル)をFirestoreから削除します。
  2. 2.
    Firebase Storageからのファイル削除:
    • ref(storage, "files/" + docId) を使用して、Firebase Storage内の files/ ディレクトリにある特定のファイルへの参照を取得します。
    • deleteObject(storageRef) を使用して、上記で取得したファイルをFirebase Storageから削除します。