Image Upload Preview

A minimal file upload preview using the FileReader API.

Code

<input type="file" id="filetoRead" /><br />
<img id="img1" />

<script>
document.querySelector("#filetoRead").addEventListener("change", function() {
  var file = this.files[0];

  if (file) {
    var reader = new FileReader();

    reader.onload = function (evt) {
      document.querySelector('#img1').src = evt.target.result;
    };

    reader.onerror = function (evt) {
      console.error("An error occurred reading the file", evt);
    };

    reader.readAsDataURL(file, "UTF-8");
  }
}, false);
</script>