Aleph2u

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.