Ao clicar em "Carregar imagem" e selecionar uma imagem dos meus arquivos, ela não é carregada.
const uploadBtn = document.getElementById("upload-btn");
const inputUpload = document.getElementById("image-upload")
uploadBtn.addEventListener("click", () => {
inputUpload.click();
})
function lerconteudoDoArquivo(arquivo) {
return new Promise((resolve, reject) => {
const leitor = new FileReader();
leitor.onload = () => {
resolve({
url: leitor.result,
nome: arquivo.name
})
}
leitor.onerror = () => {
reject(`Erro na leitura do arquivo ${arquivo.name}`)
}
leitor.readAsDataURL(arquivo)
})
}
const imagemPrincipal = document.querySelector(".main-imagem");
const nomeDaImagem = document.querySelector(".container-imagem-nome p");
inputUpload.addEventListener("change", async (evento) => {
const arquivo = evento.target.file[0];
if (arquivo) {
try {
const conteudoDoArquivo = await lerconteudoDoArquivo(arquivo);
imagemPrincipal.src = conteudoDoArquivo.url;
nomeDaImagem.textContent = conteudoDoArquivo.nome;
} catch (erro) {
console.error("Erro na leitura do arquivo")
}
}
})