35 SUBIR IMAGEN DEL PRODUCTO desde el FORMULARIO del Sistema de Ventas con (PHP y MySql)FullStack

Duración: 18 min
Módulo: 📦 Gestión de Productos y Categorías Lección 10 de 15

Descripción

Lección 35: Validación y Subida de Imágenes de Productos (FullStack) 🛡️🖼️

Esta lección es fundamental ya que corrige dos deficiencias críticas del registro de productos: la integridad de los datos (validación) y la gestión de archivos (subida de imágenes al servidor).

1. ⚙️ Validación en el Formulario (Frontend)

Se implementa la validación de campos requeridos directamente en la vista (create.php) para guiar al usuario antes de enviar la información al controlador [00:47]:

  • Atributo required: Se añade el atributo required a los campos que no deben ser nulos, basándose en la estructura de la base de datos (por ejemplo: nombre, stock, precio_compra, precio_venta, y fecha_ingreso) [03:13].
  • Campos Opcionales: Campos como descripcion, stock_minimo, stock_maximo, e imagen se dejan como opcionales, permitiendo que el producto se registre sin ellos [03:54].

2. 📁 Configuración para la Subida de Archivos

Para que PHP pueda procesar la imagen enviada, es necesario un ajuste en la etiqueta <form>:

  • Propiedad enctype: Se añade la propiedad enctype="multipart/form-data" al formulario. Esta propiedad es obligatoria para enviar cualquier archivo (imagen, audio, documentos, etc.) al servidor a través de una solicitud HTTP POST [05:44].

3. 🖼️ Lógica de Subida de Imagen (Controlador)

En el controlador (almacen/create.php), se utiliza la superglobal $_FILES para gestionar el archivo de imagen:

A. Nombramiento Único del Archivo

Para evitar que dos imágenes con el mismo nombre se reemplacen en el servidor, se genera un nombre de archivo único antes de guardarlo:

  • Concatenación de Tiempo y Nombre: El nombre final del archivo se construye concatenando la fecha y hora exacta (AAAA/MM/DD/HH:MM:SS) con el nombre original del archivo. Esto asegura que cada archivo tenga un identificador único en el servidor [07:06].

B. Traslado del Archivo

Una vez definido el nombre, el archivo se mueve a su destino final:

  • Directorio de Destino: Se crea la carpeta img/productos dentro del proyecto para almacenar permanentemente todas las imágenes [09:11].
  • Función move_uploaded_file(): Se utiliza la función nativa de PHP para mover el archivo de su ubicación temporal a la ruta de destino definida (../../almacen/img/productos/) [10:24].

C. Inserción en la Base de Datos

  • Actualización del INSERT: La consulta INSERT se ajusta para guardar en la columna imagen el nombre de archivo único que se acaba de generar (no el nombre original) [10:53].

4. 🚀 Visualización del Producto Final

Con las correcciones implementadas:

  • El sistema registra el producto correctamente.
  • La imagen se guarda en el servidor.
  • El listado de productos (index.php) se actualiza para enlazar la imagen almacenada con la ruta correcta del directorio (URL/almacen/img/productos/nombre_unico_de_archivo.ext) [14:16].

El sistema queda listo para las siguientes operaciones CRUD (Editar y Eliminar).