Skip to content

Instantly share code, notes, and snippets.

@koficoud
Created May 5, 2022 21:23
Show Gist options
  • Save koficoud/24ab4de9ac63edf7426c95735db50e41 to your computer and use it in GitHub Desktop.
Save koficoud/24ab4de9ac63edf7426c95735db50e41 to your computer and use it in GitHub Desktop.
Vaciamos el contendor en cada carga
// 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
// antes de insertar la imagen, debemos vaciar
// el contenedero, por si previamente ya se había
// cargado una image
previewEl.innerHTML = '';
// creamos el elemento img
const imgEl = document.createElement('img');
// agregamos la url
imgEl.src = this.result;
// quiza quieras agregar un texto alternativo
// en caso de que no cargue la imagen
imgEl.alt = 'La imagen no cargado correctamente.';
// insertamos dentro de preview
previewEl.appendChild(imgEl);
});
// leemos la imagen, para convertirla
// en un url valido
// al ejecutar este método, desatamos el evento load
fileReader.readAsDataURL(image);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment