Isso ocorreu na aula e agora nesse trecho de código - COMO o FileReader sabe que ele tem que ler o arquivo file? Quando isso foi passado a ele?!
Isso ocorreu na aula e agora nesse trecho de código - COMO o FileReader sabe que ele tem que ler o arquivo file? Quando isso foi passado a ele?!
Oi, Mauricio!
Isso acontece por meio do método readAsDataURL(file) que é chamado na instância do FileReader.
Vamos desmembrar o processo:
Captura do arquivo: Quando a pessoa usuária seleciona um arquivo através do elemento <input type="file">, um evento change é disparado. Nesse evento, você pode acessar o arquivo selecionado através de event.target.files[0]. Esse é o momento em que você "pega" o arquivo que o usuário escolheu.
Instância do FileReader: Você cria uma nova instância do FileReader com const reader = new FileReader();. Essa instância é o que você vai usar para ler o conteúdo do arquivo.
Método de leitura: O método reader.readAsDataURL(file) é chamado, passando o arquivo que você capturou como argumento. É nesse momento que você está dizendo explicitamente ao FileReader qual arquivo ele deve ler. O método readAsDataURL lê o arquivo e o converte em uma URL de dados (Data URL), que pode ser usada diretamente como fonte de imagens em HTML.
Evento onload: Você define uma função para reader.onload, que será executada quando a leitura do arquivo for concluída. Dentro dessa função, você pode acessar o resultado da leitura através de e.target.result e usá-lo, por exemplo, para atualizar a fonte de uma imagem para pré-visualização.
Espero ter ajudado.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓
