Sequência do desenvolvimento

Olá, Rosemberg!

A sequência das aulas está correta, a separação do código foi intencional para focar 100% no async/await nesta aula, que é o conceito principal do capítulo.

Sua intuição de que a validação deveria ser incluída no fluxo está certíssima. A ideia é que, após entender os conceitos isoladamente, você possa uni-los. O ideal é validar o arquivo primeiro e, se estiver tudo OK, prosseguir com a leitura assíncrona.

A integração ficaria assim:

inputUpload.addEventListener("change", async (evento) => {
    const arquivo = evento.target.files[0];

    // 1. Validação primeiro
    if (!arquivo || !arquivo.type.match('image/(png|jpeg)')) {
        return alert('Por favor, selecione uma imagem PNG ou JPEG.');
    }
    if (arquivo.size > 2 * 1024 * 1024) {
        return alert('A imagem deve ter no máximo 2MB.');
    }

    // 2. Se a validação passar, executa o código assíncrono
    try {
        const conteudo = await lerConteudoDoArquivo(arquivo);
        imagemPrincipal.src = conteudo.url;
        nomeDaImagem.textContent = conteudo.nome;
    } catch (erro) {
        console.error("Erro na leitura do arquivo:", erro);
    }
});

Continue com esse raciocínio!

Espero ter ajudado! Bons estudos!

Sucesso ✨

Olá, Victor!

Obrigado pelo retorno!

Então, talvez eu esteja fazendo confusão!

O atual estado do médico está assim:

const uploadBtn = window.document.getElementById("upload-btn");
const inputUpload = window.document.getElementById("image-upload");

uploadBtn.addEventListener("click", () => {
    inputUpload.click();
})

function lerConteudoDoArquivo (arquivo) {
    return new Promise((resolve, reject) => {
        // responsável por ler o arquivo que está sendo recebido como parâmetro da função
        const leitor = new FileReader();
        // resolve - chamado quando o objeto é lido com sucesso
        leitor.onload = () => {
            // cria um objeto {} com url e nome
            resolve({url: leitor.result, nome: arquivo.name}); 
        }

        // reject - chamado se algo der errado
        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");

// a validação do tipo de imagem e seu tamanho pode ocorrer aqui (testar) 

inputUpload.addEventListener("change", async (event) => {
    const arquivo = event.target.files[0];

    if (arquivo) {
        // Aqui, esse try / catch é uma funcionalidade de funções assíncronas também.
        try {
            
            // precisamos determinar o que queremos que seja esperado, então utilizamos 'await' antes da chamada da função
            const conteudoDoArquivo = await lerConteudoDoArquivo(arquivo);
            imagemPrincipal.src = conteudoDoArquivo.url;
            nomeDaImagem.textContent = conteudoDoArquivo.nome; //nome foi definido dentro do resolv, na linha 36 
        
        } catch (error) {
            console.error("Erro na leitura do arquivo");
        }
    }
})

Acontece que, ao olhar pra essa estrutura, eu fico meio perdido. Acredito que isso ocorra em função da função "lerConteudoDoArquivo ( )" estar no "topo" do projeto. Mas, olhando com mais calma, acho que intendi.

A validação ocorrerá assim que o evento change do botão "inputUpload" for "chamado", correto? Uma vez "validado", o if dentro desse evento será o próximo trecho de código a ser executado.

Ou seja, o local onde a função "lerConteudoDoArquivo ( )" está situada no código pouco importa, uma vez que ela foi criada apenas com o objetivo de ser uma promessa para a operação assíncrona LER UM ARQUIVO" e será chamada assim que o evento de mudança ocorrer.

Tipo, criamos uma função que retorna uma promessa e essa função será chamada posteriormente por um evento em específico. A partir daí, as validações deverão ocorrer dentro do evento e não dentro da função que retorna uma Promise.

Seria mais ou menos isso ou eu estou viajando demais?

Desculpa minha ignorância!