Добавление одной строки в массиве к элементу списка (li) с помощью загрузки файла?

Question

Я пытаюсь загрузить 10 файлов одновременно и создать неупорядоченный список имен всех этих файлов. Это работает нормально, пока я не попытаюсь загрузить более одного файла.

Проблема: в настоящее время я получаю обратно все строки массива менее 1 li, но я хочу sh распечатать каждый из загружаемых файлов в своем собственном li, потому что, как вы увидите в моем код, я также добавляю флажок, который будет означать, что каждый файл нуждается в своей собственной li. Я не понимаю, почему он не печатает каждый файл на свой собственный li. Я предполагаю, что он принимает входные данные «загрузки» из 1 файла (которые могут содержать и могут содержать более 1 файла) и действует так, как если бы это была одна загрузка (несмотря на то, что загружается более 1 файла).

Здесь мой код.

        var fileList = [];
        for (var i = 0; i < e.target.files.length; i++) {
          fileList.push(e.target.files[i].name);
        }

        const formatedArray = fileList.map(x => {
          return x.replace(".pdf", "");
        });

        console.log(fileList);
        console.log(formatedArray);

        ul = document.createElement("ul");

        document.getElementById("uList").appendChild(ul);

        formatedArray.forEach(function(item) {
          let li = document.createElement("li");
          ul.appendChild(li);

          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.value = 1;
          checkbox.name = "todo[]";

          li.appendChild(checkbox);

          li.innerHTML += formatedArray;
        });
      };

Thanks in advance.

Answer 1

var fileList = []; for (var i = 0; i

    const formatedArray = fileList.map(x => {
      return x.replace(".pdf", "");
    });

    console.log(fileList);
    console.log(formatedArray);

    ul = document.createElement("ul");

    document.getElementById("uList").appendChild(ul);

    formatedArray.forEach(function(item) {
      let li = document.createElement("li");
      ul.appendChild(li);

      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.value = 1;
      checkbox.name = "todo[]";

      li.appendChild(checkbox);

      li.innerHTML += item;
    });
  };