Como mostrar a prévia de uma imagem antes de enviá-la ao servidor?

Olá a todos! Sou um desenvolvedor front-end iniciante e estou com um problema. Estou fazendo um formulário para upload de avatar do usuário. Quero que o usuário possa selecionar um arquivo através de `` e ver imediatamente como a imagem ficará, sem esperar o envio ao servidor. Mas não estou conseguindo. Aqui está meu código atual: ```html ``` ```javascript const fileInput = document.getElementById('fileInput'); const preview = document.getElementById('preview'); fileInput.addEventListener('change', function() { const file = this.files[0]; // Aqui eu não sei o que fazer a seguir // Tentei simplesmente atribuir o caminho, mas não funciona preview.src = file; // Não funciona }); ``` O problema é que `file` é um objeto File, não uma string com o caminho. Li que é possível usar FileReader, mas não entendi completamente como funciona. Alguém pode me ajudar?