html

<label for="file-input">
  <span>ファイルを選択</span>
  <input type="file" id="file-input" multiple />
</label>
<ul id="file-list"></ul>

js

// 処理に必要な要素を取得
const fileInput = document.getElementById("file-input");
const fileList = document.getElementById("file-list");

// アップロードされたファイルを格納する配列を定義
let uploadedFiles = [];

// ファイルを表示する関数
const displayFile = function (file) {
  // ファイル情報を表示する要素を生成
  const listItem = document.createElement("li");
  listItem.classList.add("file-item");

  //  ファイル情報を表示する要素を生成
  const fileInfo = document.createElement("span");
  // ファイル名とファイルサイズを表示
  fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(2)} KB)`;

  //  削除ボタンを生成
  const deleteButton = document.createElement("button");
  deleteButton.textContent = "削除する";
  deleteButton.classList.add("delete-btn");

  // 削除ボタンをクリックしたときの処理
  deleteButton.addEventListener("click", function () {
    removeFile(file, listItem);
  });

  // 生成した要素をDOMに追加
  listItem.appendChild(fileInfo);
  listItem.appendChild(deleteButton);
  fileList.appendChild(listItem);
};

// ファイルを削除する関数
const removeFile = function (file, listItem) {
  uploadedFiles = uploadedFiles.filter(function (file) {
    // ファイル名が一致するものを削除
    if (file.name === listItem.textContent.split(" ")[0]) {
      return false;
    } else {
      return true;
    }
  });
  fileList.removeChild(listItem);
};

// ファイルが選択されたときの処理
fileInput.addEventListener("change", (event) => {
  // 選択されたファイルを配列に追加
  const files = Array.from(event.target.files);

  // 選択されたファイルを表示
  files.forEach((file) => {
    uploadedFiles.push(file);
    displayFile(file);
  });
  fileInput.value = ""; // 同じファイルを再選択できるようにリセット
});