Sube múltiples imágenes en Laravel 11 con vista previa y eliminación

Laravel 11 introduce una forma sencilla y eficiente de gestionar la carga de múltiples imágenes, permitiendo a los desarrolladores implementar funcionalidad de vista previa y eliminación. Este nuevo enfoque facilita a los usuarios seleccionar, ver y eliminar imágenes antes de que se finalicen las cargas, mejorando así la experiencia del usuario en las aplicaciones web. A continuación, se detalla cómo implementar esta característica en tu proyecto de Laravel.

Instalación y configuración del entorno

Antes de comenzar, asegúrate de tener Laravel 11 instalado en tu entorno de desarrollo. Si aún no lo has hecho, puedes seguir la documentación oficial de Laravel para completar la instalación. Además, será necesario realizar un par de configuraciones en tu archivo .env para habilitar el almacenamiento de archivos:

FILESYSTEM_DRIVER=public

No olvides ejecutar el comando para crear el sistema de archivos:

php artisan storage:link

Creación de la migración de base de datos

Para almacenar las imágenes que se carguen, primero debes crear una migración en la base de datos. Esto se hace creando una nueva tabla que contendrá información relevante sobre cada imagen. Utiliza el siguiente comando:

php artisan make:migration create_images_table --create=images

En la migración creada, añade el siguiente código:

public function up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('file_path');
        $table->timestamps();
    });
}

Finalmente, ejecuta la migración con:

php artisan migrate

Implementación del controlador

A continuación, necesitarás un controlador para manejar la lógica de carga de imágenes. Puedes crear uno nuevo con el siguiente comando:

php artisan make:controller ImageController

Una vez creado, agrega las siguientes funciones:

public function store(Request $request)
{
    $images = $request->file('images');

    foreach ($images as $image) {
        $path = $image->store('images', 'public');

        Image::create([
            'file_path' => $path,
        ]);
    }

    return back()->with('success', 'Imágenes subidas correctamente');
}

Creación de la vista

A continuación, es necesario diseñar la vista desde la cual los usuarios podrán subir imágenes. En el archivo Blade correspondiente, puedes usar el siguiente código:

<form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="images[]" multiple onchange="previewImages(event)">
    <div id="preview"></div>
    <button type="submit">Subir imágenes</button>
</form>

<script>
function previewImages(event) {
    const preview = document.getElementById('preview');
    preview.innerHTML = '';
    const files = event.target.files;

    for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.margin = '10px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(files[i]);
    }
}
</script>

Este código permite a los usuarios seleccionar múltiples imágenes y ver una vista previa de ellas inmediatamente después de la selección.

Eliminación de imágenes

Para implementar la funcionalidad de eliminación, añade un método adicional en el controlador:

public function destroy($id)
{
    $image = Image::findOrFail($id);
    Storage::disk('public')->delete($image->file_path);
    $image->delete();

    return back()->with('success', 'Imagen eliminada correctamente');
}

En la vista, puedes agregar un botón de eliminar junto a cada imagen que se haya subido.

Conclusión

Con estos pasos, puedes implementar de forma efectiva un sistema de carga de múltiples imágenes en Laravel 11, completo con vista previa y opción de eliminación. Este avance no solo mejora la funcionalidad de tu aplicación, sino que también ofrece una experiencia de usuario más amigable.

Te invito a seguir leyendo más noticias de este estilo en mi blog. ¡No te lo pierdas!