Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Actualizar Un Formulario Sin Adjuntar Una Imagen

Si estas creando software, probablemente te ha pasado alguna ves que cuando el usuario decide editar un registro en una formulario HTML y este decide editar otras campos, por ejemplo el nombre y no decide editar la imagen. El sistema puede mostrar un error ya que esta esperando que el usuario ingrese una imagen en el input file. En este Post te daré un alcance y te mostraré Como Enviar Un Formulario Sin Adjuntar Una Imagen, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos) y “¿ Se Debe Escuchar Música Mientras Se Programa ?(Anchor Podcast)”: 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Actualizar Un Formulario Sin Adjuntar Una Imagen.

Que Lógica Hacer Cuando el Usuario No Elige una Imagen en un Formulario HTML Para Editar un Registro

La lógica que te voy a exponer, te puede servir para diferentes entornos, frameworks, lenguajes de programación, etc.; en la mayoría de casos. No te enfoques en que solo servirá para la tecnología con la que voy a trabajar.

Asimismo la forma que te voy a compartir es una de las diferentes maneras que hay o puedes hacer para dar solución a este problema. Tu puedes optar por elegir que solución o lógica manejar y la que te voy a compartir en este Post es una de ellas.

Contexto

Supongamos que tengo un formulario para editar o actualizar un producto, en el cargo los datos nombre, precio, stock y debajo la imagen actual del producto que se busca editar, este producto tiene un id único en la base de datos:

Entonces, en el formulario anterior, si solo edito el nombre del producto y no edito la imagen del producto. Probablemente el sistema nos muestre un error de file vacio. Esto pasa porque el sistema esta buscando información sobre el archivo.

Si leiste el articulo Forma ideal de Trabajar con Archivos y una Base de Datos en un Proyecto Web o el articulo Forma ideal de Trabajar con Imágenes y una Base de Datos en un Proyecto Web, te habrás dado cuenta que alli se menciona que necesitamos guardar solo el nombre de la imagen o archivo con su extensión en la base de datos y el archivo fisico se sube al servidor.

Entonces lo que el sistema esta buscando es el nombre del archivo para insertarlo en la base de datos, especificamente esta buscando el dato filename del objeto File(), este objeto tiene en su interior varios valores y uno de ellos es el campo filename:


Talves tu estes usando el campo originalname por alguna razón o lógica que tu necesitas hacer, no hay problema, al fin y al cabo lo que se busca es obtener e insertar el nombre de la imagen de la base de datos.

Entonces si no enviamos al servidor el objeto File(), lo que seria lo mismo no enviar un archivo en el formulario, nos devolverá un error porque no se está eviando un objeto File() al actualizar el registro.

Solución

Una solución que yo suelo darle a este problema es llamar al nombre de la imagen actual que se encuentra en la base de datos y lo paso en la función en donde se actualizan los campos del registro, haciendo uso de if y else.

Para este ejemplo usaré Node JS, pero recuerda que esta lógica te va servir para diferentes entornos, frameworks, lenguajes de programación, etc., en la mayoría de casos.

En Node JS puego obtener los datos que se pasan al actualizar un formulario con req y le puedo pasar el objeto file es decir req.file, entonces lo que hago es verificar con if si el objeto File() no esta vacio y obtengo la imagen enviada por el usuario desde el formulario actualizar, para mi caso coloco el nuevo nombre de la imagen dentro de un objeto llamado producto dentro del key img, es decir img: req.file.filename

Y si el objeto File() no existe, es decir el usuario no edito la imagen del registro, pues usamos el nombre actual de la imagen que se encuentra en la base de datos. Selecciono la imagen por el id del producto, algo como un “Select * from productos where id = 3” y de ese resultado obtenido, accedo al valor del campo img de la base de datos con producto[0].img y lo paso como nombre de la imagen en la actualización:


En el código anterior estoy usando un modelo que he creado en otro archivo, dentro de ese modelo se hacen las consultas o queries para crear, leer, actualizar y eliminar un registro. Por ejemplo para actualizar los datos de un registro, hago lo siguiente:


Ten en cuenta que estoy usando Node JS, si tu estas usando otro entorno, la lógica que te he compartido te puede servir.

Nota: Recuerda que puedes aplicar una validación si tu proyecto lo requiere.

Conclusión

En terminos sencillos, lo que debes hacer es mantener la imagen actual del registro que esta almacenado en la base de datos, ya que si el usuario no actualiza la imagen, el sistema no tiene porque hacer algo al respeto, solo debe mantener el actual valor que ya esta en la base de datos. Para esto verificamos que el objeto File() exista luego que el usuario envie los valores al presionar actualizar en el formulario de edición.

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil