Vista previa instantánea de imágenes en formularios Laravel

Este snippet de JavaScript muestra una vista previa instantánea cuando el usuario selecciona una nueva imagen en un formulario, sin necesidad de enviar el formulario.

Problema que resuelve: Cuando un usuario edita un registro y cambia una imagen, normalmente sigue viendo la miniatura de la imagen antigua mientras que el nombre del archivo muestra la nueva selección, lo que resulta confuso.

Opción 1: JavaScript en archivo separado (public/js)

document.addEventListener('DOMContentLoaded', function() {
    const inputImagen = document.getElementById('imagen');
    if (inputImagen) {
        inputImagen.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const previewImagen = document.getElementById('preview-imagen');
                    if (previewImagen) {
                        previewImagen.src = event.target.result;
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
});

Implementación: Guarda este código en public/js/imagen-preview.js e inclúyelo en tu vista con:

<script src="{{ asset('js/imagen-preview.js') }}"></script>

Opción 2: Directamente en la vista Blade

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('imagen').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    document.getElementById('preview-imagen').src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endsection

Implementación: Añade este código al final de tu archivo Blade y asegúrate de que tu layout tenga una sección @yield('scripts').

Opción 3: Con Laravel Mix

Guarda el código en resources/js/imagen-preview.js:

export function setupImagePreviews() {
    const inputImagen = document.getElementById('imagen');
    if (inputImagen) {
        inputImagen.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const previewImagen = document.getElementById('preview-imagen');
                    if (previewImagen) {
                        previewImagen.src = event.target.result;
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
}

Importa la función en resources/js/app.js:

import { setupImagePreviews } from './imagen-preview';

document.addEventListener('DOMContentLoaded', function() {
    setupImagePreviews();
});

Configura webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

Compila los assets:

npm run dev

Incluye en tu vista:

<script src="{{ mix('js/app.js') }}"></script>

Nota: No olvides añadir un elemento <img id="preview-imagen"> en tu HTML para mostrar la vista previa.