Procesamiento de archivos - Aceptando imágenes

Clase 27 de 35 • Curso de Node.js con Hapi

Resumen

En esta clase aprenderemos el manejo de archivos con Hapi. Agregaremos la posibilidad de anexar imágenes a las preguntas. Para esto será necesario modificar el método create del modelo questions.js para que guarde en la base de datos de Firebase el nombre de archivo.

Será necesario también requerir algunos módulos adicionales, o algunas funciones desde esos módulos:

const { writeFile } = require('fs')
const { promisify } = require('util')
const { join } = require('path')

Instalaremos y usaremos el módulo uuid en su versión v1 para manejar nuestros propios nombres de archivo internamente y evitar la duplicidad.

En el controlador de las preguntas incorporamos la lógica del manejo de archivos cuando se ha identificado la presencia del dato image en el buffer del con

Buffer.isBuffer( request.payload.image )

Este campo image debemos incluirlo en el formulario, en la vista con el formulario de respuesta. Finalmente, al recibir el archivo a través del buffer tendremos que escribirlo en el filesystem del servidor, para lo cual usaremos la función writeFile que hemos convertido en promesa y llamado write( args ) con los argumentos correspondientes. Ya para mostrar la imagen en la vista cuando se haya recuperado, sólo bastará con incorporar la etiqueta <img /> con la referencia al archivo almacenado.

José Emanuel Osorio Vázquez

student•

La validación de Buffer si funciona como la hizo el profesor, y así se aseguran de que solo si la imagen es un binario sea guardada. Para que el binario de la imagen sea accesible desde el payload deben de asegurarse de que en el html su form tenga habilitada la opción:

enctype="multipart/form-data"

Para que no el servidor no incurra en un error al habilitar este tipo de content-type. En las opciones de la ruta agreguen:

options: {
      payload: {
        parse: true,
        multipart: true,
      },
....

Esto habilitará la cabecera que permitirá el tipo de contenido. Y así la definición de la ruta quedará:

  {
    method: 'POST',
    path: '/new-question',
    options: {
      payload: {
        parse: true,
        multipart: true,
      },
      validate: {
        payload: questionSchema.validQuestion,
        failAction: questionController.failValidation,
      },
    },
    handler: questionController.createQuestion,
  },

Felipe Carrión

student•

Por si alguno tiene problemas con el buffer lo solucione de la siguiente manera:

var x = Buffer.from(req.payload.image);
      //console.log(Buffer.isBuffer(x));
        if(Buffer.isBuffer(x)){
          filename = `${uuid.v1()}.png`;
          console.log(filename);
          await write(join(__dirname,'..','public','uploads',filename), req.payload.image);
        }

Annderson Rey Sánchez

student•

const uuidv1 = require('uuid/v1'); // &lt;== NOW DEPRECATED!
uuidv1();

const { v1: uuid } = require('uuid');

Raziel Carvajal

student•

Para los que tengan error con el require del uuid

const uuid = require('uuid/v1')

cambiar por:

const uuid = require('uuid/dist/v1')

Juan Manuel Oyarzún Gajardo

student•

No funciona la validación de Buffer.

Felipe Carrión

student•

el problema del buffer lo solucione de al siguiente manera:

var x = Buffer.from(req.payload.image);
console.log(Buffer.isBuffer(x));

Armando Rivera

student•

Tengo un problema al momento de gurardar los archivos, se guardan pero no puedo ver la imagen, dice que el archivo está dañado y

Buffer.isBuffer( req.payload.image )

Siempre me devuelve falso a pesar de que haya mandado una imagen

Nicolas David Pastran Zamora

student•

Para recibir un vídeo o un documento etc podría usar la misma lógica ?

Francisco Garcia [C6]

student•

mi aporte:

const { v1: uuidv1 } = require('uuid')

const write = promisify(writeFile)


async function createQuestion(req, h) {
    if (!req.state.user) {
        return h.redirect('/login')
    }

    let result, filename
    try {
        if (Buffer.isBuffer(req.payload.image)) {
            filename = `${uuidv1()}.png`
            await write(join(__dirname, '..', 'public', 'uploads', filename), req.payload.image)
        }
        result = await questions.create(req.payload, req.state.user, filename)
        console.log(`Pregunta creada con el ID: ${result}`)
        return h.redirect(`/question/${result}`)
        //return h.response(`Pregunta creada con el ID: ${result}`)
    } catch (error) {
        console.error(`Ocurrio un error: ${error}`)

        return h.view('ask', {
            title: 'Crear pregunta',
            error: 'Problemas creado la pregunta'
        }).code(500).takeover()
    }
}

Juan Carlos García Esquivel

student•

Mi ruta quedo de la siguiente manera:

{
    path: '/create-question',
    method: 'POST',
    options: {
      payload: {
        multipart: true,
      },
      validate: {
        payload: Joi.object({
          title: Joi.string().required(),
          description: Joi.string().required(),
          image: Joi.any().optional(),
        }),
        failAction: user.failValidation,
      },
    },
    handler: question.createQuestion,
  },

José Emanuel Osorio Vázquez

student•

Hola compañero, tengo un problema que no he podido solucionar. Tengo el mismo código que en la clase, pero en el payload se manda el nombre de la imagen y no su binario. Alguna ayuda?

Jose Daniel Molina

student•

La subida de imágenes, a mi parecer es mucho más fácil con Express y usando módulos externos.

Michael Camelo

student•

veo en algunos comentariosque proponen arrgalar la parte del buffer con este codigo

var x = Buffer.from(req.payload.image);

sin embargo, si se emplea ese codigo se guarda una imagen vacio en la carpeta updates, propongo otra solucion para el problema del Buffer

es instalar el paquete

npm i is-buffer

y el codigo quedaría asi

const isBuffer = require('is-buffer')

async function createQuestion(req, h) {
    if (req.state.user) {
        h.redirect('/login')
    }
    let result, filename;
    try {
        const x = req.payload.image;
        //console.log(isBuffer(x.toString('binary')));
        if (isBuffer(x)) {
            filename = `${uuid()}.png`
            
            const path = join(__dirname,'..', 'public/uploads/',filename);
            await write(path, req.payload.image, (err) => {
                if (err) {
                    console.log("Error uploading file.");
                }
                console.log("File is uploaded");
            });
        }
        //console.log( req.payload, req.state.user )
        result = await questions.create(req.payload, req.state.user, filename);

    } catch (err) {
        console.error(`Ocurrio un error: ${err}`);
        return h.view('ask', {
            title: 'Crear pregunta',
            error: 'Problemas creado la pregunta',
        }).code(500).takeover();
    }
    console.log(`Pregunta creada con el ID 1 ${result}`);
    return h.redirect(`/question/${result}`);
}

Eric Gomez

student•

Mi aporte:

const { writeFile, mkdirSync } = require('fs')

......
async function createQuestion (req, h) {
  if (!req.state.user) {
    return h.redirect('/login')
  }

  try {
    // Realizamos la destructuracion de la pregunta para eliminar [Object: null prototype]
    const question = { ...req.payload }

    let filename
    if (Buffer.isBuffer(question.image)) {
      filename = `${uuid()}.png`

      // Creamos la carpeta uploads si no existe 
      mkdirSync(`${__dirname}/../public/uploads`,{recursive:true});
      // Agregamos la imagen en la carpeta el uploads
      await write(join(__dirname, '..', 'public', 'uploads', filename), question.image)
    }

    const result = await questions.create(question, req.state.user, filename)
    console.log(`Pregunta creada con el ID ${result}`)

    return h.redirect(`/question/${result}`)
  } catch (error) {
    console.error(`Ocurrio un error: ${error}`)

    return h.view('ask', {
      title: 'Crear pregunta',
      error: 'Problemas creando la pregunta'
    }).code(500).takeover()
  }
}

Procesamiento de archivos - Aceptando imágenes

Introducción

Qué necesitas para este curso y qué aprenderás sobre Node.js con Hapi

Conceptos principales de hapi y creación de nuestro primer servidor

Breve historia y estado actual

Creando un sitio básico con Hapi

El objeto h, response y sus herramientas

Uso de plugins - Contenido estático

Plantillas con Handlebars

Renderizado de vistas - Layout y template del home

Recibiendo parámetros en una ruta POST - Creación del registro

Definir una mejor estructura con buenas prácticas en Hapi

Validando la información - Implementando Joi

Introducción a Firebase

Creando un modelo y guardando en firebase

Implementando el login y validación del usuario

Autenticación de usuarios - Cookies y estado

Manejando errores

Visualización de errores

Controlar el error 404 en inert y el error de validación

Repaso - Creación del modelo y controlador para preguntas

Repaso - Creación de las rutas para crear preguntas

Listar las últimas preguntas en el home

Aplicacion de conceptos avanzados

Enrutamiento avanzado - visualizando una pregunta

Enrutamiento avanzado - respondiendo una pregunta

Generando la lógica de la plantilla según si es creador o contribuidor

Métodos de servidor - respuesta correcta

Usando métodos de servidor

Manejo del caché - Agregando el home al caché

Procesamiento de archivos - Aceptando imágenes

Logging con Good - Monitoreando el servidor

Creación de plugins - Teoría

Creación de plugins - Implementando un API REST

Estrategías de autenticación - Asegurando el API REST

Seguridad básica - Asegurando el servidor contra CSRF

Seguridad básica - Asegurando el servidor contra XSS

Herramientas de desarrollo

Depuración del proyecto

Ecosistema de Hapi