Cómo recibir ficheros desde NodeJS

Clase 27 de 33 • Curso de Node.js: Base de Datos con MongoDB y WebSockets

Resumen

En esta clase utilizaremos multer para subir archivos a través de nuestros chats.

OQO Digital

student•

Si te perdiste, pero tienes el código bien. Borra los mensajes de la base de datos. Ten creados dos usuarios en la base de datos. Ahora ve a crear un chat nuevo (POST) y debe ser un body JSON así:

{
	"users": [
		"idDelUser1",
		"idDelUser2"
	]
}

Luego, ve a crear un mensaje (POST), a diferencia de la versión anterior, ahora se de le debe agregar el id del chat correspondiente de la creación que hicimos.

{
	"chat": "idChat",
	"user": "idUser1",
	"message": "mensaje"
}

Ahí puedes crear más mensajes.

Luego para hacer el GET de chat, debes poner el ID del User en la URL: http://localhost:3000/chat/userId

Fernando Cordero

student•

todo bien hasta qeu hago el GET de chat y me muestra vacio el mensaje

Juan Valero Reyes

student•

me pasa exactamente lo mismo, cuando hago la petición Get del chat me sale un array vació... esperando su respuesta para avanzar, creo que hay alguna confusión con las clases

Omar Armando Gonzalez Tolen

student•

Al enviar la imagen se guardaba como binario, yo solucione el problema así , obteniendo la extensión del nombre original archivo

const path = require(&quot;path&quot;)
const multer = require(&quot;multer&quot;)

const storage = multer.diskStorage({
    destination : &quot;uploads/&quot;,
    filename : function (req, file, cb) {
        cb(null, file.fieldname + &quot;-&quot; + Date.now() + 
        path.extname(file.originalname))
    }
})

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

Francisco Sarria

student•

Para los que estamos cursando este curso en 2021 esta solución puede que no nos sirva por cuestiones de versión. Acá encontré una solución que me funcionó, noviembre 2021: https://medium.com/swlh/how-to-upload-image-using-multer-in-node-js-f3aeffb90657

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './uploads')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
})
var upload = multer({ storage: storage })```

Sergio Medina

student•

Muchas gracias Omar y Francisco, me sirvió para guardar la imagen y verla como el profesor.

Ramiro Contreras León

student•

Por favor, no hagan más en ningún curso esto de meter código y explicarlo por arriba. Hasta la clase anterior todo me funcionaba y hoy me pierdo el día entero tratando de encontrar el error!

Pablo Nicolás Alonso

student•

Todo se va actualizando y el curso empieza a "deprecarse" muy rapido.

Andres Prieto

student•

Bienvenido a la programación :D

Rulo Code

student•

Si usan PostMan y les salta error al usar form-data sólo tienen que desactivar el Header de content-type

Harold Sánchez

student•

Gracias!!

Alver Alexander Grisales Ortega

student•

Guarda la imagen cómo binario, para solucionarlo obtengo la extensión del archivo a cargar.

const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/uploads/');
    },
    filename: function (req, file, cb) {
        const [name, extension] = file.originalname.split('.');
        cb(null, `${name}-${Date.now()}.${extension}`)
    }
})

const upload = multer({ storage: storage });
router.post('/', upload.single('file'), function (req, res) {
    controller.addMessage(req.body.chat, req.body.user, req.body.message)
        .then((response) => responses.success(req, res, response))
        .catch((error) => responses.error(req, res, error, 400, 'Error en el controlador'))
});

Juan Sebastian Tello Quinteros

student•

Perfecto :D

Kevin Costa

student•

Qué quilombo se me enredó todo

Diego Alejandro Cifuentes Arango

student•

Necesitas ayuda ? :/ aunque creo que el mensaje un poco tarde..

Reinaldo Mendoza

student•

La respuesta esta en el comentario #1

Maycol Ruiz

student•

El profesor se ve que sabe mucho del tema, lo domina, pero tiene una estrategia pedagógica muy deficiente, hay partes del código que escribió pero nunca salen en el video, uno tiene que estar revisando qué partes diferentes de código encuentra y además la clase está muy desordenada, parece que no prepara la clase sino que va escribiendo código sobre la marcha, se nota por los errores que comete.

Lans Quintero

student•

Nota mental: siempre esperar a que finalice la clase y no empezar a desarrollar sin haber finalizado...

Julio Cesar Barrales Flores

student•

Hay que darse una vuelta por el código, porque ha cambiado más cosas de las que explica en el vídeo, sobre todo en la parte del componente de message.

Reinaldo Mendoza

student•

Totalmente, despues de un par de dias finalmente consegui entenderlo y seguir adelante

Gianfranco Giordano Padrón

student•

creo que es interesante saber que tenemos esta hermosa web: https://www.npmjs.com/ para encontrar lo que necesitemos instalar, como utilizarlo, etc ... Espero sea de provecho este comentario para la comunidad Platzi.

Reinaldo Mendoza

student•

De hecho creo que de alli es de donde se descargan todas las librerias

Nicolas Gonzalez

student•

Para los que fueron a ver el archivo y les parecio algo asi... ++b4f00781b05e514e71c37d4c4268fa39++

La solucion es esta o al menos mi solucion

const multer = require('multer');
//esto es nativo a si que no necesitas instalarlo
const path = require('path');

const storage = multer.diskStorage({
  destination:  "uploads/",
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
  }
})

const upload = multer({ storage: storage })

Harold Sánchez

student•

Si te guarda la imagen... pero como un binario sin extensión. Puedes setear el formato de la imagen de la siguiente forma: (Windows)

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '.jpg') //Appending .jpg
    }
})

const upload = multer({
    storage: storage
})

router.post('/', upload.single('file'), function(req, res){ ...

Lucas Solares

student•

Muy interesante! Mira una consulta porque defines un request y que es el cb?

Alejandro Barba

student•

Isolares: El método diskStorage utiliza dos funciones para definir el destino del archivo y su nombre. En la función destination el parámetro "cb" tiene como función manejar el error y establecer su ubicación. En la función filename el parámetro cb tiene como objetivo manejar el error también y definir el nombre del archivo. El parámetro req me imagino que es para manejar el contenido del archivo, pero no me hagas mucho caso en esto último.

René Sanchez

student•

Muy buena poder ingresar imagenes y documentos desde el multi-part data!!!

Como no podia ver imagenes en mi windows ya que no es tan potente como linux.. investige sobre como añadir la extencion y poder tener el archivo correto en mi nodejs.

Les comparto una pagina de stackoverflow donde se explica el procedimiento:

https://stackoverflow.com/questions/31592726/how-to-store-a-file-with-file-extension-with-multer

Tiene muchas funcionalidades para poder hacer cositas entretes viendo el repo donde te indican como debe hacerse paso a paso entiendo todo:

https://github.com/expressjs/multer

Cesar Velásquez Córdova

student•

Muchas gracias, muy buenísimo aporte!!

JUAN SILVA

student•

Un consejo de corazón, si quieres programar de forma profesional PASATE A LINUX

Jose Gonzalez

student•

Comando para el populate del message teniendo en cuenta el chat y los users dentro de chat`.

export const getMessages = async (filterUser: IMessages) => {
  return new Promise((resolve, reject) => {
    MessageModel.find(filterUser)
      .populate('user')
      .populate({
        path: 'chat',
        populate: {
          path: 'users',
        },
      })
      .exec((error, res) => {
        if (error) {
          return reject(error);
        }
        resolve(res);
      });
  });
};

Elias Guillermo Ruiz Gonzalez

student•

++Modelo de clases++ Para entender mejor el desarrollo presento un pequeño modelo de clases de los objetos que se utilizan.

Espero que sea de utilidad

Saludos

Nicolás Díaz

student•

Cual es el formato json correcto para enviar mensajes ahora? Porque esto:

{	
	"user": "5dde5d5629714e036671b618",
	"chat": "5dde70a292162a07820c6bf6",
	"message": "Hola Mundo"
}

Me devuelve:

{
  "error": "Informacion inválida",
  "body": ""
}

Iair Poloniecki

student•

El mensaje de abajo de oqodigital responde tu pregunta

Rafael Echart

student•

hola companero, tuve creo que tu mismo problema, primero en el model.js de CHAT tienes que tener el campo Users definido como ARRAY. de esta manera>

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const mySchema = new Schema({
    users: [{
        type: Schema.ObjectId,
        ref: 'User',
    }],
});

const model = mongoose.model('Chat', mySchema);
module.exports = model;```


DATE CUENTA COMO DESPUES DE USERS: EMPIEZA CON UN [] Y DESPUES VIENE EL {}


en Inmsonia tienes que escribir:
POST=> localhost:3000/chat/

{ "users": ["ID de usuario ya creado en componente usuario","ID de usuario ya creado en componente usuario"]


recuerda que primero tienes que haber creado dos usuarios en el componente usuario para que el populate funcione.

Vi una recomenadacion en la seccion de comentarios sobre borrar todos los mensajes primero y luego mandar un mensaje nuevo con todos los campos nuevos. 

Espero haberte ayudado..

Marcelo Vargas Avila

student•

Para los que están con la versión de multer 1.4.4

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

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

Nicolas Cardenas Camelo

student•

Gracias

Sandra Milena Rairán Pinilla

student•

Hola!! Por favor nos comparten el código de las clases?

Me podrían orientar cómo se hace en postman el "Multipart Form". ?. Gracias

Ricardo Celis

teacher•

claro que si! ya te lo comparto

Ricardo Celis

teacher•

https://github.com/CodingCarlos/backend-node-platzi/tree/92957457c1bf790d2a33446392ae0680ffc0174d

Alejandro Ruiz Melo

student•

Se complica el código y es necesario estar muy atento. Hay que borrar los datos de la base. Ahora para enviar mensaje primero hay que crear al menos 2 usuarios, luego enviarlos como chat y cuando se tenga el id del chat, se puede enviar el mensaje.

Andrés Carrillo

student•

El proyecto no se puede descargar completo o es mi impresión? deja ir viendo lo que uno necesita y no se puede navegar hacía atrás