Formularios y Multer en Node.js

Gestión de Formularios

• Se añadirán formularios que permitirán insertar, borrar o modificar contenido de la base de datos.
• Se modificarán las rutas para mostrar los formularios y recoger las peticiones de inserción, borrado y modificación.
• Se continuará el proyecto ContactosWeb, copiándolo y renombrándolo a ContactosWeb_v2.

Formulario de inserción

• Se creará una vista llamada contactos_nuevo.njk en la carpeta de views.
• Esta vista heredará de base.njk y definirá el formulario en su bloque de contenido.
• La vista contiene un formulario con campos para nombre, edad y teléfono, y un botón para enviar la información.
• Para mostrar esta vista, se necesita un enlace "Nuevo contacto" en el menú de navegación de la aplicación (vista menu.njk), que enviará a la ruta /contactos/nuevo.
• Para que la interfaz envie datos al servidor, es necesario definir una ruta en routes/contactos.js que atenderá las peticiones GET a /contactos/nuevo y renderizará la vista anterior.
• La nueva ruta deberá ubicarse ANTES de la ruta de ficha del contacto.
• Los datos del formulario se enviarán por POST a la ruta /contactos.
• Se debe definir o redefinir esta ruta para que recoja los datos de la petición, realice la inserción y, por ejemplo, renderice el listado de contactos para comprobar que el nuevo contacto se ha añadido y, en caso de error, renderizar una vista de error.
• Se utilizará el middleware incorporado en Express para procesar la petición cuando los datos lleguen desde un formulario normal.
• Además de habilitar el procesado JSON app.use(express.json());, se habilitará el procesado urlencoded: app.use(express.urlencoded({ extended: true }));
  • El parámetro extended indica si se permite procesar datos que proporcionen información compleja (true) o solo se procesará información simple (false).

Formulario de borrado

• En el listado de contactos, se añadirá un formulario con un botón de "Borrar" asociado a cada contacto y este botón se enviará a la URL /contactos.
• Se debe añadir un mecanismo para que el formulario llegue a la ruta correcta en el servidor, ya que los formularios no aceptan el método DELETE.
• Se instalará el módulo method-override de NPM, que permite emparejar formularios del cliente con métodos del servidor.
• Se configura el parametro para que, si llega en el formulario un campo llamado method, utilice ese método en lugar al método del propio formulario.
• Se incluye el módulo en el servidor principal index.js.

const methodOverride = require('method-override');

• Luego, se añade el middleware.

app.use(methodOverride(function (req, res) {
  if (req.body && typeof req.body === 'object' && '_method' in req.body) {
    let method = req.body._method;
    delete req.body._method;
    return method;
  }
}))

• En la vista de contactos_listado.njk, se define un pequeño formulario junto a cada contacto, con un botón para borrarlo a partir de su id.
• En dicho formulario, se incluye un campo oculto cuyo nombre sea _method, indicando que la operación a realizar en el servidor es DELETE.
• Se redefine la ruta para el borrado.
• Se elimina el contacto cuyo ID llega en la URL y se redirige al listado de contactos, o se muestra la vista de error si no.

Formulario de Actualización

• Para hacer una actualización, se deben combinar pasos de la inserción y el borrado.
• Definir el formulario de actualización, pasando el objeto a modificar como parámetro a la vista para rellenar los campos.
• Añadir una nueva ruta GET en el enrutador, por ejemplo, /contactos/editar, para renderizar el formulario.
• El formulario se envía por PUT a la ruta correspondiente del enrutador, utilizando el campo oculto method para indicar que se quiere hacer PUT.
• En la ruta put del enrutador, se recogen los datos del formulario, se realiza la actualización y se redirige a la vista de listado general o página de error.

Formulario y Ruta de Edición

• Siguiendo los pasos anteriores, se define el formulario de edición en un archivo contactos_editar.njk.

• Se añade una nueva ruta en el controlador para renderizar el formulario:

router.get('/editar/:id', (req, res) => {
  Contacto.findById(req.params['id']).then(resultado => {
    if (resultado) {
      res.render('contactos_editar', {contacto: resultado});
    } else {
      res.render('error', {error: "Contacto no encontrado"});
    }
  }).catch(error => {
    res.render('error', {error: "Contacto no encontrado"});
  });
});

Actualización de datos del contacto

• La ruta put recoge los datos de la petición y actualiza el contacto:

router.put('/:id', (req, res) => {
  Contacto.findByIdAndUpdate(req.params.id, {
    $set: {
      nombre: req.body.nombre,
      edad: req.body.edad,
      telefono: req.body.telefono
    }
  }, {new: true}).then(resultado => {
    res.redirect(req.baseUrl);
  }).catch(error => {
    res.render('error', {error: "Error modificando contacto"});
  });
});

Subir ficheros en el formulario

• Para subir ficheros en un formulario, el tipo de formulario debe ser multipart/form-data.
• Dentro, habrá uno o varios campos de tipo file con los archivos que el usuario elegirá subir.

<form action="..." method="post" enctype="multipart/form-data">
  <input type="file" class="form-control" name="imagen">
</form>

• Para procesar este tipo de formularios, se necesita una librería adicional llamada multer.

npm install multer

• En los ficheros donde se necesite la subida de archivos, se debe incluir esta librería y configurar los parámetros de subida y almacenamiento:

const multer = require('multer');

let storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + "_" + file.originalname)
  }
})

let upload = multer({storage: storage});

• El elemento storage define la carpeta donde se subirán los archivos, en este ejemplo public/uploads, y qué nombre se asignará a los archivos al subirlos.
  • El atributo originalname del objeto file contiene el nombre original del archivo del cliente, pero para evitar sobreescrituras, se concatena como prefijo la fecha o timestamp actual con Date.now().
• Se utiliza el middleware upload que se ha configurado.
• Si en un servicio POST se espera recibir un archivo en un campo file llamado imagen, se puede hacer que automáticamente se suba a la carpeta especificada, aplicando el middleware en el servicio.

router.post('/', upload.single('imagen'), (req, res) => {
  // El archivo estará subido
  // Con req.file.filename se obtiene el nombre actual
  // Con req.body.XXX se obtienen el resto de campos
});

Subida de ficheros y method-override

• Se utiliza el middleware method-override para sustituir comandos HTTP en una petición y usar los comandos PUT o DELETE aunque el formulario sea POST.
• Cuando el formulario sube ficheros y es multipart/form-data, el procesamiento que se consigue con express.urlencoded no es suficiente.
• Express no es capaz de reemplazar el método POST por PUT con method-override:

<form action="..." method="post" enctype="multipart/form-data">
  <input type="hidden" name="_method" value="put">
</form>

• Para solucionar este problema se utiliza un middleware adicional como busboy-body-parser, pero tiene problemas de compatibilidad con otros middlewares como multer.
• Una solución es reemplazar el servicio PUT del enrutador por otro POST al que se le pase la id del elemento a editar.

// Modificar contactos
// Lo definimos como "POST" para integrarlo mejor en un formulario multipart
router.post('/:id', (req, res) => {
  // El código interno del servicio no cambia
});

Validación de formularios

• Una tarea importante al enviar formularios es la validación, que se puede hacer tanto en el cliente (con HTML5 y JavaScript) como en el servidor.
• La validación en el servidor es importante, independientemente de si los datos se validan también en el cliente, como paso previo a su inserción en una base de datos.
• Alternativas para realizar la validación de datos en el servidor:
  • Utilizar una librería básica como validator.js, que permite comprobar y corregir cadenas de texto.
  • Emplear una librería web como express validator
  • Utilizar los propios mecanismos de validación que ofrecen los esquemas de Mongoose.

Validación de textos con validator.js

• La librería validator.js permite comprobar la validez de cadenas de texto y sanearlas.
• Sanear es limpiar textos, eliminar espacios o escapar caracteres
• Los datos que se reciben en una petición son textos, hasta que se procesan y almacenan en una base de datos.
• Se debe instalar la librería con el comando npm install validator.

const validator = require('validator');

router.post('/', (req, res) => {
  let nombre = req.body.nombre;
  let telefono = req.body.telefono;

  if(validator.isEmpty(nombre) ||
  !validator.isLength(nombre, {min: 3}))
  {
    // Redirigir a página de error por el nombre
  }
  else if (!validator.isNumeric(telefono) ||
  !validator.isLength(telefono, {min: 9, max: 9}))
  {
    // Redirigir a página de error por el teléfono
  }
  else
  {
    // Correcto, hacer la inserción
  }
});

Validación de peticiones con express-validator

• Para validar los datos de una petición en Node y Express se pueden utilizar librerías adicionales como express-validator.
  • Esta librería aglutina y amplía opciones ofrecidas por validator.js.
  • Se instala con el comando npm install express-validator.
• Una vez instalada, se tienen a disposición validadores y saneadores.
• Para utilizar los validadores, se debe acceder a los parámetros de la petición desde el cuerpo (body) o la query string (query).
• Usando la libreria es posible comprobar si el nombre de un contacto no está vacío antes de una inserción.

const { body } = require('express-validator');

router.post('/', body('nombre').notEmpty(), (req, res) => {
  // Código habitual de inserción de contacto
});

• Un middleware en el servicio POST accede con body('nombre') al valor enviado para el nombre y comprueba con el validador notEmpty que no esté vacío.
• Si la validación se cumple se continúa con el proceso, y si no lo hace se interrumpe la petición.
• Se puede limpiar espacios con el saneador trim tras la validación:

const { body } = require('express-validator');

router.post('/', body('nombre').notEmpty().trim(), (req, res) => {
  // Código habitual de inserción de contacto
});

• Esta característica se denomina encadenamiento de validaciones (validation chain) y permite enlazar varias comprobaciones para un mismo dato en el proceso.

Validación de peticiones con los esquemas de Mongoose

• En sesiones anteriores se configuran los esquemas de Mongoose para validar documentos en MongoDB
• Se indica en los esquemas los mensajes de error a mostrar si la validación falla.
• Se modifica el ejemplo de ContactosWeb_v2 en otra carpeta llamada ContactosWeb_v3 y se edita el fichero models/contacto.js.

const mongoose = require('mongoose');
// Definición del esquema de nuestra colección
let contactoSchema = new mongoose.Schema({
nombre: {
type: String,
required: [true, 'El nombre del contacto es obligatorio'],
minlength: [3, 'El nombre del contacto es demasiado corto'],
trim: true
},
telefono: {
type: String,
required: [true, 'El número de teléfono es obligatorio'],
unique: true,
trim: true,
match: [/^\d{9}$/, 'El teléfono debe constar de 9 dígitos']
},
edad: {
type: Number,
min: [18, 'La edad mínima debe ser 18'],
max: [120, 'La edad máxima debe ser 120']
}
});
// Asociación con el modelo (colección contactos)
let Contacto = mongoose.model('contacto', contactoSchema);
module.exports = Contacto;

• Se añade un array con el valor y mensaje de error.

• Se modifcan los servicios de inserción y borrado.

• El elemento error.errors es un objeto con detalles sobre los errores de validación.

• Object.keys(error.errors) devuelve un array de las claves (nombres de campo) presentes en error.errors.

• Dentro del campo errors del error devuelto, se construye una respuesta que acumule los errores detectados.

• Si no se detectan errores, se muestra un error genérico.