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!
