# ファイル削除

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

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

1. deleteSelectedFiles() : 削除する対象ファイルを特定する処理
2. deleteFile() : Firebase FirestoreとFirebase Storageから特定のファイルを削除する処理

## `deleteSelectedFiles` 関数

ファイル一覧上でチェックされたファイルを特定し、ファイルを削除する`deletelFile` 関数に識別子(docId)を渡します。

{% embed url="<https://github.com/monaca-samples/firebase-storage/blob/master/www/js/deleteFiles.js>" %}

```javascript
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の両方から関連するファイルとメタデータを同時に削除できます。

```javascript
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から削除します。