Lab 23: Archivos

Descripción

En esta actividad exploraremos el manejor de archivos con node + express.

Modalidad

Individual.

Objetivos de aprendizaje

• Entender cómo funciona la subida de archivos a un servidor.
• Desarrollar aplicaciones web que le permitan a los usuarios subir archivos que se almacenen en el servidor.

Instrucciones

• Para poder enviar archivos al servidor, primero debemos preparar la petición HTTP desde el cliente para indicar que vamos a enviar un archivo por medio de una forma que va a enviar muchos datos en partes, y definir un control de entradas tipo file para que el usuario pueda seleccionar un archivo de su computadora:

  <form action="archivo" method="POST"  enctype="multipart/form-data"> 
      <input type="file" name="archivo">
      <input type="submit" name="enviar" value="subir">
                          

• Para poder manejar archivos desde node, requerimos instalar el paquete multer. Para usar multer, tenemos que registrar el middleware y configurar cómo queremos manejar los archivos:

  const multer = require('multer');
  
  //fileStorage: Es nuestra constante de configuración para manejar el almacenamiento
  const fileStorage = multer.diskStorage({
      destination: (request, file, callback) => {
          //'uploads': Es el directorio del servidor donde se subirán los archivos 
          callback(null, 'uploads');
      },
      filename: (request, file, callback) => {
          //aquí configuramos el nombre que queremos que tenga el archivo en el servidor, 
          //para que no haya problema si se suben 2 archivos con el mismo nombre concatenamos el timestamp
          callback(null, new Date().toISOString() + '-' + file.originalname);
      },
  });
  
  //Idealmente registramos multer después de bodyParser (la siguiente línea ya debería existir)
  app.use(bodyParser.urlencoded({ extended: false }));
  
  //En el registro, pasamos la constante de configuración y
  //usamos single porque es un sólo archivo el que vamos a subir, 
  //pero hay diferentes opciones si se quieren subir varios archivos. 
  //'archivo' es el nombre del input tipo file de la forma
  app.use(multer({ storage: fileStorage }).single('archivo')); 
                          

  Para acceder a los datos del archivo en el controlador, como por ejemplo si queremos guardar la ruta en la base de datos, podemos acceder a los atributos por medio del objeto request.file:

  const.postArchivo = (request, response, next) => {
      const ruta_archivo = request.file.path;
  };
                          

• Para limitar el tipo de archivos que se pueden subir, podemos crear una nueva constante de configuración y pasar la constante al registro:

  const fileFilter = request, file, callback => {
      if (file.mimetype == 'image/png' || 
          file.mimetype == 'image/jpg' ||
          file.mimetype == 'image/jpeg' ) {
              callback(null, true);
      } else {
              callback(null, false);
      }
  }
  
  app.use(multer({ storage: fileStorage, fileFilter: fileFilter }).single('archivo')); 
                          

• Para poder ver las imágenes de nuestro servidor en nuestros clientes, es necesario indicar que el directorio donde se encuentran las imágenes, también puede ser utilizado de manera estática:

  app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
                          

  Es importante que a este folder le agreguemos un archivo index.html vacío, para que los contenidos del directorio no puedan ser listados.
• Agrega la funcionalidad para trabajar con archivos en tus laboratorios anteriores o proyecto. Recuerda que siempre tienes también la opción de crear un prototipo para explorar estas características.
• Si tienes formas de edición de archivos, es importante que agregues funcionalidad para que si no se sube un nuevo archivo, no se modifique el archivo que ya estaba almacenado.

Preguntas a responder

Recursos

• multer
• pdfkit

Especificaciones de entrega

A través de tu repositorio personal (Bitbucket o GitHub).