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!

Oi, Rosemberg, tudo bem?

Quero começar destacando que sua análise está excelente, você não está “viajando” em nada. Pelo contrário, seu raciocínio mostra um bom entendimento do fluxo do código.

Isso mesmo, a validação do arquivo deve acontecer dentro do evento change, e não na função que retorna a Promise. Isso tem tudo a ver com o princípio da Separação de Responsabilidades.

A função lerConteudoDoArquivo existe para uma tarefa bem definida: receber um arquivo e devolver uma promessa com o conteúdo lido. Já o addEventListener funciona como o orquestrador da interação: ele captura o evento, faz as validações rápidas e síncronas — que dão feedback imediato — e só depois, se tudo estiver certo, chama a função especializada para o trabalho assíncrono. É por isso que a posição da definição da função não importa, já que ela só entra em ação quando o orquestrador a chama.

Só reforçando que a sua dúvida não tem nada de ignorância; . Continue se questionando assim, porque é exatamente isso que aprofunda o aprendizado.

Espero ter ajudado! Bons estudos!

Sucesso ✨