Problem
<html lang="en">
  <body>
    <h1>Upload and Preview Images</h1>
    <input type="file" id="fileInput" multiple accept="image/*" />
    <div id="preview"></div>

    <script>
      function uploadFile(event) {
        const previewImage = document.getElementById("preview");
        previewImage.innerHTML = "";
        const files = event.target.files;

        files.forEach((file) => {
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              let img = document.createElement("img");
              img.src = e.target.result;
              img.style.display = "block";
              previewImage.appendChild(img);
            };
            reader.readAsDataURL(file);
          }
        });
      }

      document
        .getElementById("fileInput")
        .addEventListener("change", uploadFile);
    </script>
  </body>
</html>
Solution

The files property of the input element is not an array. It is a FileList object. The FileList object is similar to an array, but it does not have array methods like forEach. To convert the FileList object to an array, you can use the Array.from method.

<html lang="en">
  <body>
    <h1>Upload and Preview Images</h1>
    <input type="file" id="fileInput" multiple accept="image/*" />
    <div id="preview"></div>

    <script>
      function uploadFile(event) {
        const previewImage = document.getElementById("preview");
        previewImage.innerHTML = "";
        const files = Array.from(event.target.files);

        files.forEach((file) => {
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              let img = document.createElement("img");
              img.src = e.target.result;
              img.style.display = "block";
              previewImage.appendChild(img);
            };
            reader.readAsDataURL(file);
          }
        });
      }

      document
        .getElementById("fileInput")
        .addEventListener("change", uploadFile);
    </script>
  </body>
</html>