ファイル削除

ファイル一覧表示処理で表示されたリストを対象に、ユーザーが複数ファイルを選択して削除する機能を作成していきます。

ファイル削除機能では、次の2つの処理を用意します。

  1. deleteSelectedFiles() : 削除する対象ファイルを特定する処理

  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. チェックされたファイルの識別:

    • document.querySelectorAll("#files-list input[type='checkbox']:checked") を使用して、IDが files-list の要素内にある、チェックされたチェックボックスを全て取得します。

  2. 選択されたファイルの削除:

    • 各チェックボックスから value 属性を読み取り（これはドキュメントIDに対応しています）、deleteFile 関数を呼び出して、そのIDに対応するファイルを削除します。

    • deleteFile は、FirestoreとFirebase Storageの両方からファイルを削除する関数です。

  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. Firestoreからのドキュメント削除:

    • doc(firestore, "files", docId) を使用して、Firestore内の files コレクションにある特定のドキュメント（ファイル）への参照を取得します。

    • deleteDoc(docRef) を使用して、上記で取得したドキュメント（ファイル）をFirestoreから削除します。

  2. Firebase Storageからのファイル削除:

    • ref(storage, "files/" + docId) を使用して、Firebase Storage内の files/ ディレクトリにある特定のファイルへの参照を取得します。

    • deleteObject(storageRef) を使用して、上記で取得したファイルをFirebase Storageから削除します。

前へファイル一覧表示次へFAQ

最終更新