Lección: 23 🖼️ GALERÍA de Productos: Subida y Eliminación de Imágenes | File Upload en Laravel 12 E-commerce

23 🖼️ GALERÍA de Productos: Subida y Eliminación de Imágenes | File Upload en Laravel 12 E-commerce

Duración: 30 min

Módulo: 📦 Módulos Esenciales (Categorías y Productos) 17-24 Lección 7 de 8

Descripción

Lección 23: 🖼️ Galería de Productos: Subida y Eliminación de Imágenes

Este capítulo es esencial para la gestión del inventario, pues se crea un espacio dedicado y funcional para manejar todas las fotografías de cada producto, implementando un flujo completo de carga y eliminación.

🧭 Preparación y Navegación

Para una gestión de imágenes más eficiente, se establece un acceso directo desde el listado de productos:

Se crea un botón con el ícono 🖼️ Imagen en la vista principal (index) de productos [01:11].
Este botón dirige a una nueva ruta específica (/productos/{id}/imagenes) [02:56], desacoplando la funcionalidad de la vista de detalle (show).

📤 Carga de Archivos a través de Modal

El proceso de subida se centraliza en una interfaz simple y directa:

Se utiliza un componente Modal de Bootstrap para la interfaz de carga [04:57].
El formulario de subida requiere el atributo enctype="multipart/form-data" para el correcto envío del archivo [13:36].
Se incluye un script para la previsualización (🔍) de la fotografía seleccionada antes de confirmar la subida [08:07].

🛡️ Lógica de Almacenamiento (uploadImage)

El controlador maneja el archivo y registra su ruta de manera segura:

Validación: Se aplican reglas estrictas para garantizar que el archivo sea una imagen con extensiones válidas, limitando su tamaño a un máximo de 2 MB [10:38].
Almacenamiento Seguro: La imagen se guarda en el Storage público del servidor (ruta: storage/app/public/productos) con un nombre encriptado para evitar colisiones [12:34].
Registro en Base de Datos: Se crea un nuevo registro en la tabla producto_imagen que enlaza la ruta del archivo y el ID del producto asociado [11:53].

🗑️ Eliminación Completa y Segura (destroyImage)

La funcionalidad de borrado está diseñada para garantizar la limpieza total de datos innecesarios:

Se implementa un botón Borrar Imagen bajo cada miniatura de la galería [25:06].
El método de eliminación ejecuta una doble acción crítica [27:07]:
1. Limpieza del Servidor: Primero, elimina el archivo físico (Storage::delete) del disco.
2. Limpieza de la Base de Datos: Luego, elimina el registro de la imagen en la tabla producto_imagen.
Esto previene que el servidor acumule "basura" o archivos huérfanos sin registros asociados, manteniendo el sistema limpio y optimizado.

Hilari Web