102 Upload logo de la configuración del Sistema con LARAVEL(PHP-MySql) FullStack
Duración: 17 minDescripción
💾 Módulo 102: Subida y Almacenamiento del Logotipo de Configuración
Esta lección cubre la implementación de la lógica para guardar los datos de configuración del sistema, con un enfoque crucial en el manejo de la subida del archivo del logotipo de la clínica, sus validaciones y su almacenamiento seguro en el servidor.
1. ⚙️ Habilitación de Subida de Archivos
Para que Laravel pueda procesar archivos enviados desde el formulario (el logotipo), es esencial modificar la etiqueta <form>.
Modificación del Formulario: Se debe añadir el atributo enctype="multipart/form-data" a la etiqueta de formulario en create.blade.php. Sin esto, el controlador no recibe el archivo, solo su nombre de texto [14:35].
HTML
<form action="..." method="POST" enctype="multipart/form-data">
2. 📝 Lógica y Validaciones en el Controlador
El método store del ConfiguracionesController se actualiza para realizar la validación y el guardado de los datos.
A. Definición de Validaciones [07:31]
Se implementaron validaciones estrictas para asegurar que todos los campos requeridos sean provistos por el administrador:
- nombre: required
- direccion: required
- telefono: required
- correo: required
- logo: required (Aunque el campo logo se requiere, se recomienda añadir una validación de tipo image o mimes para restringir el formato de archivo).
B. Manejo y Guardado del Logotipo (Upload)
El proceso de almacenamiento de la imagen se realiza en tres pasos fundamentales:
- Validación y Acceso al Archivo: Laravel debe instanciar el componente Storage al inicio del archivo (línea use Illuminate\Support\Facades\Storage; en la parte superior del controlador) [13:46].
Almacenamiento en el Servidor: Se utiliza el método store() del archivo. Este método se encarga de:
- Guardar la imagen en el directorio especificado.
- Generar un nombre de archivo único y encriptado (hash) para evitar colisiones de nombres si se sube el mismo archivo varias veces [15:39].
- Devolver el nombre encriptado del archivo [16:48].
PHP
$logo_nombre = $request->file('logo')->store('logos', 'public');
- 'logos': Directorio dentro de storage/app/public donde se guarda la imagen.
- 'public': Indica que el archivo debe ser accesible públicamente, facilitando su visualización web.
- Guardado en la Base de Datos: Se guarda el nombre encriptado del archivo ($logo_nombre) en la columna logo de la tabla configuraciones [15:46].
C. Creación del Registro [08:49]
Finalmente, una vez que la validación es exitosa y el archivo se ha subido, se crea la nueva instancia del modelo Configuracion con todos los datos y el nuevo nombre del logotipo, y se redirecciona al índice con un mensaje de éxito.
🖼️ Previsualización del Logotipo (UX)
Para mejorar la experiencia del administrador, se implementó un script de JavaScript que permite previsualizar la imagen seleccionada inmediatamente después de elegirla, antes de enviarla al servidor [05:56].
- Este script utiliza el evento onchange del input de tipo file para leer el archivo localmente y mostrarlo en una etiqueta <img> oculta.
- Esto asegura que el administrador pueda confirmar la imagen correcta antes de registrar la configuración.
➡️ Próximo Paso [16:50]
La próxima lección se centrará en la visualización de la configuración guardada, lo que implica mostrar los datos de texto y, fundamentalmente, mostrar la imagen del logotipo desde la carpeta storage en el dashboard.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
