Cómo mostrar una vista previa de la imagen antes de subirla al servidor

¡Hola a todos! Soy un desarrollador frontend principiante y tengo un problema. Estoy haciendo un formulario para subir el avatar de un usuario. Quiero que el usuario pueda seleccionar un archivo a través de `` y ver inmediatamente cómo se verá la imagen, sin esperar a enviarla al servidor. Pero no logro que funcione. Aquí está mi código actual: ```html ``` ```javascript const fileInput = document.getElementById('fileInput'); const preview = document.getElementById('preview'); fileInput.addEventListener('change', function() { const file = this.files[0]; // Aquí es donde no sé qué hacer a continuación // Intenté simplemente asignar la ruta, pero no funciona preview.src = file; // No funciona }); ``` El problema es que `file` es un objeto File, no una cadena con la ruta. Leí que se puede usar FileReader, pero no entendí bien cómo funciona. Por favor, indíquenme cómo hacerlo.