Cómo subir imágenes en Laravel 11 con vista previa

Diego Cortés
Diego Cortés
January 22, 2025
Cómo subir imágenes en Laravel 11 con vista previa

La gestión de imágenes es una funcionalidad fundamental en muchas aplicaciones web. Laravel 11 ha simplificado aún más este proceso, permitiendo a los desarrolladores implementar la carga de imágenes con vista previa de manera efectiva. A continuación, te presentamos una guía informativa sobre cómo hacerlo, basada en las mejores prácticas.

Requisitos previos

Antes de comenzar, asegúrate de tener instalado Laravel 11 y configurado tu entorno de desarrollo. Es fundamental contar con un servidor web como Apache o Nginx y tener Composer instalado. Adicionalmente, es conveniente tener conocimientos básicos en PHP y Laravel.

Configuración del proyecto

Para iniciar, crea un nuevo proyecto con el siguiente comando:

composer create-project --prefer-dist laravel/laravel nombre-del-proyecto

Para este tutorial, usaremos una base de datos MySQL, por lo que será necesario configurar el archivo .env de tu proyecto con los datos de conexión correspondientes.

Crear el formulario de carga de imágenes

El siguiente paso es crear una vista donde se podrá cargar la imagen. Ve a la carpeta resources/views y crea un archivo llamado upload.blade.php. En este archivo, añade el siguiente código:

<!DOCTYPE html>
<html>
<head>
    <title>Subir imágenes</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>Subir una imagen con vista previa</h2>
<form id="image-form" enctype="multipart/form-data">
    @csrf
    <input type="file" id="image" name="image" accept="image/*" required>
    <br><br>
    <img id="preview" src="#" alt="Vista previa" style="display:none; width:200px; height:auto;" />
    <br><br>
    <button type="submit">Subir Imagen</button>
</form>

<script>
    $(document).ready(function() {
        $('#image').on('change', function() {
            const file = $(this)[0].files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                    $('#preview').show();
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>

</body>
</html>

Este código crea un formulario que permite seleccionar una imagen y, al seleccionarla, muestra una vista previa instantánea.

Controlador y rutas

Ahora, necesitas un controlador que maneje la carga de la imagen. Ejecuta el siguiente comando en la terminal para crear un controlador:

php artisan make:controller ImageController

En el nuevo controlador (ImageController.php), añade el siguiente método:

public function upload(Request $request)
{
    $request->validate([
        'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
    ]);

    $imageName = time().'.'.$request->image->extension();  
    $request->image->move(public_path('images'), $imageName);

    return back()->with('success', 'Imagen subida exitosamente.')->with('image', $imageName);
}

Ahora, define la ruta en routes/web.php para acceder al formulario y al método de carga:

use App\Http\Controllers\ImageController;

Route::get('/upload', function () {
    return view('upload');
});

Route::post('/upload', [ImageController::class, 'upload']);

Conclusión

Con estos pasos, ahora tienes un sistema básico para subir imágenes con vista previa en Laravel 11. Esta funcionalidad es muy útil para diversas aplicaciones, permitiendo a los usuarios ver sus imágenes antes de finalizar la carga.

Te invito a seguir explorando más noticias y tutoriales relacionados en mi blog, donde encontraras información valiosa para mejorar tus habilidades como desarrollador. ¡No te lo pierdas!

Información del artículo

Publicado: January 22, 2025
Categoría: Tutoriales de Laravel
Tiempo de lectura: 5-8 minutos
Dificultad: Intermedio

Consejos clave

1

Toma tu tiempo para entender cada concepto antes de continuar con el siguiente.

2

Practica los ejemplos en tu propio entorno de desarrollo para mejor comprensión.

3

No dudes en revisar los recursos adicionales mencionados en el artículo.

Diego Cortés
Diego Cortés
Full Stack Developer, SEO Specialist with Expertise in Laravel & Vue.js and 3D Generalist

Preguntas Frecuentes

Categorías

Page loaded in 26.52 ms