index.js

// guardamos la referencia del contenedor donde mostraremos la imagen
const previewEl = document.querySelector('#preview');
// guardamos la referencia del input donde se cargará la imagen
const inputEl = document.querySelector('#image');

// agregamos el escuchador para detectar cambios
inputEl.addEventListener('change', function () {
  // el código dentro de esta función anónima
  // se ejecutara, cada vez que se detecte un cambio
  // en el input
  
  // obtnemos la referencia al primer archivo
  // donde podría encontrarse la image
  const image = inputEl.files[0];
  
  // verificamos que la imagen sea diferente de undefined
  // puede ser undefined si en vez de cargar una foto, se elimina
  if (image !== undefined) {
    // creamos una nueva instancia de FileReader
    // mas info en: https://developer.mozilla.org/es/docs/Web/API/FileReader
    const fileReader = new FileReader();
    
    // como lo hicimos con el input agregamos un listener
    // en este caso escucharemos el event load
    // el cual se ejecutara cuando se lea un archivo binario
    fileReader.addEventListener('load', function () {
      // dentro de esta función anónima, vamos a
      // crear un elemento img y agregar el url
    });    
    
    // leemos la imagen, para convertirla 
    // en un url valido
    // al ejecutar este método, desatamos el evento load
    fileReader.readAsDataURL(image);
  }
});