Display Uploaded Images

images.html

<!-- Use the FileReader API's readAsDataURL method to show uploaded images -->

<input type="file" id="uploaded-file" />
<div id="result"></div>
<script>
  function readImage() {
    const fileReader = new FileReader();
    const file = document.getElementById("uploaded-file").files[0];
    if (file) {
      fileReader.readAsDataURL(file);
    }
    fileReader.addEventListener(
      "load",
      () => {
        const img = document.createElement("img");
        img.src = fileReader.result;
        document.getElementById("result").append(img);
      },
      { once: true }
    );
  }
  document.getElementById("uploaded-file").addEventListener("change", readImage);
</script>